monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit ebfa97fe663ff8b93b3fe484f76cf0d261d185f0 1 parent d3ae0ccd

【#1346】 忙时配置功能-静态页面及数据调用-搜索待后台调整数据【接口都已联调】 #1

Inline Side-by-side
Showing 4 changed files with 374 additions and 1 deletions
<title>忙时配置</title>
<iframe src="/vue3/index.html#/vue3/busyConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -87,7 +87,12 @@ const routes = [{
path: '/vue3/batchChangeLeaders',
name: 'batchChangeLeaders',
component: () => myImport('views/batchChangeLeaders/index')
}
},
{
path: '/vue3/busyConfig',
name: 'busyConfig',
component: () => myImport('views/busyConfig/index')
},
];
// hash模式： createWebHashHistory
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="search" style="margin:6px 0;">
<div class="condition">
<el-input v-model="search.keyWords" placeholder="请输入关键字"></el-input>
<el-button size="small" type="primary" style="margin-left: 6px;" @click="getDataList">查询</el-button>
<el-button size="small" type="primary" @click="addConfig">新增</el-button>
<el-button size="small" type="primary" @click="delConfig">删除</el-button>
</div>
</div>
<div class="search-table">
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:showIndex="true"
:total="tableData.count"
@loaddata = "loaddata"
:showSelection="true"
@selectionChange="selectionChange"
:showBorder="true"
:loading="false"
:pageSize="pageSize"
:showPage="true"
:showTools="true"
:height="height - 110">
<template #default="{row,prop,column}">
<div>
<el-tag style="margin:5px;" v-if="prop=='years'" v-for="(item,index) in row.years">{{item}}</el-tag>
<el-tag style="margin:5px;" v-if="prop=='months'" type="success" v-for="(item,index) in row.months">{{item}}</el-tag>
<el-tag style="margin:5px;" v-if="prop=='days'" type="info" v-for="(item,index) in row.days">{{item}}</el-tag>
<el-tag style="margin:5px;" v-if="prop=='hours'" type="warning" v-for="(item,index) in row.hours">{{item}}</el-tag>
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<i class="el-icon-delete" title="删除" style="cursor: pointer;" @click="handleDelete(scope.row)"></i>
<i style="margin-left:6px;cursor: pointer;" class="el-icon-edit" title="修改" @click="handleEdit(scope.row)"></i>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
<!--弹框-->
<cm-dialog :title="dialog.title" width="60%" :showDialogVisible="dialog.show" @okfunc="saveConfig" @hidedialog="hideDialog" :showFooter="true">
<template v-slot>
<div class="add-container" style="height:500px;padding:0 10px;">
<el-row>
<el-col :span="24" style="display: flex;align-items: center;
border-bottom:1px solid #1e9fff;padding:10px;margin-bottom: 10px;">
<span style="margin-right: 10px;display: flex;align-items: center;"><i style="display:inline-block;padding:5px;"></i>年：</span>
<el-checkbox-group style="display: flex;flex-wrap: wrap;" v-model="yearCheckList">
<el-checkbox v-for="(item,index) in yearData" :label="item+''" >{{item}}年</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="display: flex;align-items: center;
border-bottom:1px solid #1e9fff;padding:10px;margin-bottom: 10px;">
<span style="margin-right: 10px;display: flex;align-items: center;"><i style="display:inline-block;padding:5px;"></i>月：</span>
<el-checkbox-group style="display: flex;flex-wrap: wrap;" v-model="monthCheckList">
<el-checkbox v-for="(item,index) in 12" :label="item+''" >{{item}}月</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="display: flex;align-items: center;
border-bottom:1px solid #1e9fff;padding:10px;margin-bottom: 10px;">
<span style="margin-right: 10px;display: flex;align-items: center;"><i style="display:inline-block;padding:5px;"></i>日：</span>
<el-checkbox-group style="display: flex;flex-wrap: wrap;" v-model="dayCheckList">
<el-checkbox v-for="(item,index) in 31" :label="item+''" >{{item}}日</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="display: flex;align-items: center;
border-bottom:1px solid #1e9fff;padding:10px;margin-bottom: 10px;">
<span style="margin-right: 10px;display: flex;align-items: center;"><i style="color:#ff0000;padding:5px;">*</i>时：</span>
<el-checkbox-group style="display: flex;flex-wrap: wrap;" v-model="hourCheckList">
<el-checkbox v-for="(item,index) in 24" :label="item+''" >{{item}}时</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
</div>
</template>
</cm-dialog>
... ...
export default {
name: 'busyConfig',
template: '',
components: {
},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let yearCheckList=Vue.ref([]);//年选择数据
let monthCheckList=Vue.ref([]);//月选择数据
let dayCheckList=Vue.ref([]);//日选择数据
let hourCheckList=Vue.ref([]);//时选择数据
let dialog=Vue.ref({
title:'忙时配置',
show:false,
id:''
});
let search = Vue.ref({
status: 0,
keyWords: '',
page: 1,
limit: 50,
});
//表格字段
let tableData = Vue.ref({
count:0,
dataList: [],
columns: [
{
prop: 'years',
label: '年',
sortable: true,
align: 'center',
width: '200',
},
{
prop: 'months',
label: '月',
sortable: true,
align: '200',
},
{
prop: 'days',
label: '日',
sortable: true,
align: 'center',
}, {
prop: 'hours',
label: '时',
sortable: true,
align: 'center',
width: '200'
}
]
})
// 表格全选事件
let checkData=Vue.ref([]);
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.id)
})
checkData.value = checkArr;
}
// 获取列表
let getDataList = () => {
proxy.$http.get(`/api-analysis/busyAnalysis/getList?keyWords=`+search.value.keyWords, {
page: search.value.page,
limit: search.value.limit,
}, function (res) {
if (res && res.data) {
tableData.value.dataList = res.data;
tableData.value.count = res.count;
tableData.value.dataList.map(item=>{
if(item.year){
item.years=item.year.split(",");
}
if(item.month){
item.months=item.month.split(",");
}
if(item.day){
item.days=item.day.split(",");
}
if(item.hour){
item.hours=item.hour.split(",");
}
})
} else {
tableData.value.dataList = [];
tableData.value.count = 0;
}
});
}
let loaddata = ({page, limit}) => {
search.value.page = page;
search.value.limit = limit;
}
let hideDialog = (flg) => {
dialog.value.show = flg;
if(!flg){
dialog.value.id='';
yearCheckList.value=[];
monthCheckList.value=[];
dayCheckList.value=[];
hourCheckList.value=[];
}
}
// 处理弹框
let handle = (row) =>{
dialog.value.id = row.id;
yearCheckList.value=row.years?row.years:[];
monthCheckList.value=row.months?row.months:[];
dayCheckList.value=row.days?row.days:[];
hourCheckList.value=row.hours?row.hours:[];
console.log("////",yearCheckList.value,monthCheckList.value,dayCheckList.value,hourCheckList.value)
hideDialog(true);
}
//修改详情
let handleEdit = (row) =>{
handle(row);
}
//删除数据
let handleDelete=(row)=>{
deletData(row);
}
//获取当前年的前后三年
let yearData=Vue.ref([])
let getYearData=()=>{
let date=new Date();
let arr=[];
for(let i=0;i<=3;i++){
arr.push(date.getFullYear()-i);
if(i!=0){
arr.push(date.getFullYear()+i)
}
}
arr.sort((a, b) => {
return a - b
});
yearData.value=arr;
}
//新增配置
let addConfig=()=>{
hideDialog(true);
}
//批量删除配置
let delConfig=()=>{
if(checkData.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
deletData();
}
//删除操作
let deletData=(row)=>{
let idList='';
if(row){
idList=row.id;
}else{
if(checkData.value.length>0){
idList=checkData.value.join(',')
}
}
proxy.$global.confirm("确认删除数据吗？", function () {
proxy.$http.get(`/api-analysis/busyAnalysis/remove`, {
idList: idList
}, function (res) {
if(res && res.success){
proxy.$global.showMsg('删除成功');
}else{
proxy.$global.showMsg('删除失败','error');
}
getDataList();
})
})
}
//保存配置
let saveConfig=()=>{
if(hourCheckList.value.length<1){
proxy.$global.showMsg('请至少选择一个时间','warning');
return;
}
let year='';
if(yearCheckList.value.length>0){
year=yearCheckList.value.join(",");
}
let month='';
if(monthCheckList.value.length>0){
month=monthCheckList.value.join(",");
}
let day='';
if(dayCheckList.value.length>0){
day=dayCheckList.value.join(",");
}
let hour='';
if(hourCheckList.value.length>0){
hour=hourCheckList.value.join(",");
}
if(dialog.value.id){
proxy.$http.post(`/api-analysis/busyAnalysis/update`, {
year: year,
month: month,
day: day,
hour: hour,
id:dialog.value.id
}, function (res) {
if(res && res.success){
proxy.$global.showMsg('修改成功');
}else{
proxy.$global.showMsg('修改失败','error');
}
hideDialog(false);
getDataList();
})
}else{
proxy.$http.post(`/api-analysis/busyAnalysis/add`, {
year: year,
month: month,
day: day,
hour: hour
}, function (res) {
if(res && res.success){
proxy.$global.showMsg('保存成功');
}else{
proxy.$global.showMsg('保存失败','error');
}
hideDialog(false);
getDataList();
})
}
}
// 挂载完
Vue.onMounted(() => {
getYearData();
getDataList();
})
return {
saveConfig,
delConfig,
addConfig,
selectionChange,
handleDelete,
checkData,
yearData,
dialog,
getYearData,
height,
search,
hideDialog,
handle,
loaddata,
tableData,
getDataList,
handleEdit,
yearCheckList,
monthCheckList,
dayCheckList,
hourCheckList
}
}
}
... ...