<template>
|
<div class="page-content-container">
|
<div class="page-content-left">
|
<content-box
|
title="站点管理">
|
<my-tree
|
:tree-data="treeData"
|
@tree-click="treeClick"></my-tree>
|
</content-box>
|
</div>
|
<div class="page-content-right">
|
<content-box class="content-box"
|
:title-left=true>
|
<div class="whyc-breadcrumb" slot="title">
|
<flex-layout direction="row">
|
当前位置：文件管理
|
<div slot="footer">
|
<el-popover
|
placement="bottom"
|
:width="280"
|
trigger="click">
|
<div class="center">
|
<el-button type="primary" size="mini" @click="backupNow">立即备份</el-button>
|
<el-button type="primary" size="mini" @click="viewFolder">查看文件</el-button>
|
<el-button type="primary" size="mini"
|
v-if="$store.state.login.username == 'superuser'"
|
@click="editParams">参数设置</el-button>
|
</div>
|
<el-button slot="reference" type="success" size="mini">FTP管理</el-button>
|
</el-popover>
|
</div>
|
</flex-layout>
|
</div>
|
<div class="pages-file">
|
<flex-layout>
|
<div class="btn_grp" slot="header">
|
<!-- <el-button type="primary" size="small"
|
icon="el-icon-plus" @click="downloadMult">下载</el-button> -->
|
</div>
|
<el-table
|
class="el-green"
|
:data="tableData"
|
height="100%"
|
border
|
@selection-change="selectChange"
|
size="mini">
|
<!-- <el-table-column
|
align="center"
|
type="selection"
|
width="55">
|
</el-table-column> -->
|
<el-table-column
|
type="index"
|
label="编号"
|
align="center"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="table_name"
|
label="名称"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="table_date"
|
label="存储日期"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
align="center"
|
width="160">
|
<template slot-scope="scope">
|
<el-button type="primary" size="mini"
|
@click="download(scope.row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</flex-layout>
|
</div>
|
</content-box>
|
</div>
|
<el-dialog class="el-dialog-center" top="0vh" v-cloak title='FTP备份文件参数设置'
|
:visible.sync="updateParams.show" width="5.2rem"
|
:close-on-click-modal=false
|
@closed="updateParamsClosed">
|
<flex-layout>
|
<div class="formFtp-content color-black">
|
<el-form class="formFtp" label-position="right" size="small" label-width="144px" :rules="formFtp.rules" :model="formFtp.data">
|
<el-col :span="24">
|
<el-form-item label="备份周期(分钟)" prop="updateCycle">
|
<el-input v-model.number="formFtp.data.updateCycle"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备份有效期(天)" prop="backupMaxTimelong">
|
<el-input v-model.number="formFtp.data.backupMaxTimelong"></el-input>
|
</el-form-item>
|
<!-- 备份目录 -->
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备份目录">
|
<el-input v-model.number="formFtp.data.backup_path"
|
ref="backupPath" :readonly="true">
|
<i slot="suffix" @click="copyText"
|
class="el-input__icon el-icon-document-copy"></i>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<!-- 上次备份时间 -->
|
<el-col :span="24">
|
<el-form-item label="上次备份时间">
|
<el-input v-model.number="formFtp.data.lastupdate_time" :disabled="true"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="default" size="small" @click="updateParams.show = false">取 消</el-button>
|
<el-button type="primary" size="small" @click="editParamsOk">确 定</el-button>
|
</div>
|
</flex-layout>
|
</el-dialog>
|
<form
|
ref="export"
|
:action="action"
|
method="post"
|
enctype="multipart/form-data">
|
<input type="hidden" name="PageName" value="fileout"/>
|
<input type="hidden" name="dev_id" v-model="curDevId" />
|
<input type="hidden" name="dev_name" v-model="curDevName">
|
<input type="hidden" name="table_name" v-model="tableName">
|
<input type="hidden" name="states" v-model="states">
|
</form>
|
<progress-load
|
:show.sync="progress.show"
|
:percentage="progress.value"
|
:text="progress.text"></progress-load>
|
</div>
|
</template>
|
|
<script>
|
import FlexLayout from '@/components/FlexLayout'
|
import ContentBox from '@/components/ContentBox'
|
import MyTree from '@/components/tree/Index'
|
import ProgressLoad from '@/components/ProgressLoad'
|
import { setTimeout } from 'timers';
|
export default {
|
name: 'pagesFile',
|
components: {
|
FlexLayout,
|
ContentBox,
|
MyTree,
|
ProgressLoad,
|
},
|
data() {
|
// 配置导出的action
|
let action = this.$config.http+'EXportCSV.servlet';
|
|
return {
|
curDevId: '',
|
curDevName: '',
|
tableName: '',
|
states: '',
|
treeData: [],
|
tableData: [],
|
action: action,
|
// 当前选择行的数据 对象数组
|
selection: [],
|
updateParams: {
|
show: false,
|
},
|
formFtp: {
|
data: {
|
cfg_id: '',
|
updateCycle: '',
|
backupMaxTimelong: '',
|
lastupdate_time: '',
|
backup_path: ''
|
},
|
rules: {
|
updateCycle: [
|
{ required: true, message: '请输入周期值', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
// console.log(rule, value, callback);
|
// console.log(value, callback);
|
if (value < 2) {
|
callback(new Error('周期值不能小于2'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
backupMaxTimelong: [
|
{ required: true, message: '请输入有效期', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (value < 1 || value > 366) {
|
callback(new Error('有效期必须在1~366之间'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
},
|
},
|
progress: {
|
show: false,
|
value: 0,
|
text: ''
|
}
|
}
|
},
|
mounted () {
|
this.getSysList();
|
this.getParams();
|
},
|
methods: {
|
// 单个下载
|
download (obj) {
|
this.tableName = obj.table_date;
|
// 显示进度条
|
this.progress.show = true;
|
// 请求后台
|
this.$api.file.clearProgress()
|
.then(()=> {
|
this.getProgress();
|
// 构造查询条件
|
let searchParams = {
|
pageName: 'fileout',
|
dev_id: this.curDevId,
|
dev_name: this.curDevName,
|
table_name: this.tableName,
|
states: this.states,
|
};
|
// 请求后台获取数据
|
this.$api.file.download(searchParams)
|
.then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code == 1) {
|
setTimeout(()=>{
|
// 设置点击事件
|
let data = res.data[0];
|
const link = document.createElement("a");
|
link.href = encodeURI(this.$config.url+'tomcat7_csv/'+data.fileName);
|
link.download = data.fileName;
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
}, 1000);
|
|
setTimeout(()=>{
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
}, 1000*2);
|
}else {
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
this.$layer.msg('生成文件失败！');
|
}
|
}).catch(error=>{
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
this.$layer.msg('生成文件失败！');
|
console.log(error);
|
});
|
});
|
},
|
getProgress: function() {
|
let self = this;
|
// 请求后台获取进度
|
this.$api.file.getProgress()
|
.then(function(res){
|
res = JSON.parse(res.data.result);
|
let cache = Number((res.data[0]/2).toFixed(0));
|
let percentage = Number((res.data[1]/2).toFixed(0));
|
|
if(percentage == 0) {
|
if(cache>50) {
|
cache = 50;
|
}
|
self.progress.value = cache;
|
self.progress.text="数据加载中...";
|
}else {
|
percentage += 50;
|
self.progress.value = percentage;
|
self.progress.text="文件下载中...";
|
}
|
|
if(percentage<100 && self.progress.show) {
|
setTimeout(self.getProgress, 50);
|
}else {
|
self.progress.value = 100;
|
}
|
});
|
},
|
editParams () {
|
this.getParams();
|
this.updateParams.show = true;
|
},
|
editParamsOk () {
|
let param = {
|
cfg_id: this.formFtp.data.cfg_id,
|
update_cycle: this.formFtp.data.updateCycle,
|
backup_max_timelong: this.formFtp.data.backupMaxTimelong
|
};
|
this.$api.file.updateParams(param).then((res) => {
|
let data = JSON.parse(res.data.result);
|
// console.log(data, '====data');
|
if (data.code) {
|
this.$message({
|
type: 'success',
|
message: data.msg
|
});
|
this.updateParams.show = false;
|
} else {
|
this.$message({
|
type: 'warning',
|
message: data.msg
|
});
|
}
|
});
|
},
|
// 查看文件
|
viewFolder () {
|
window.open(this.$config.root+'ftpbackup', 'ftpbackup');
|
},
|
// 查询配置
|
getParams () {
|
this.$api.file.getParams().then((res) => {
|
var re = JSON.parse(res.data.result);
|
// console.log(re, '====re');
|
if (re.code == 1) {
|
this.formFtp.data.updateCycle = re.data[0].update_cycle;
|
this.formFtp.data.backupMaxTimelong = re.data[0].backup_max_timelong;
|
this.formFtp.data.cfg_id = re.data[0].cfg_id;
|
this.formFtp.data.backup_path = re.data[0].backup_path;
|
this.formFtp.data.lastupdate_time = re.data[0].lastupdate_time;
|
} else {
|
this.formFtp.data.cfg_id = '';
|
this.formFtp.data.backup_path = '';
|
this.formFtp.data.updateCycle = '';
|
this.formFtp.data.backupMaxTimelong = '';
|
this.formFtp.data.lastupdate_time = '';
|
}
|
});
|
},
|
treeClick(data) {
|
if (!data.end){
|
return false;
|
}
|
data.dev_id = data.dev_id || data._dev_id;
|
const sys_name = data.txt;
|
data.cfg = data.cfg.map((v) => {
|
var reg = /^(\S*?)(?=&&)|^[^&]+$/;
|
return reg.exec(v)[0];
|
});
|
this.states = data.cfg.join(',');
|
|
this.curDevId = data.dev_id;
|
this.curDevName = data.txt;
|
// 查询相关子站的数据
|
this.$api.file.searchAllFile({dev_id: data.dev_id,dev_name: data.txt})
|
.then((res) => {
|
let data = JSON.parse(res.data.result);
|
let list = [];
|
if (data.code == 1) {
|
list = data.data;
|
}
|
list.forEach((v) => {
|
v['table_date'] = v.table_name;
|
v['table_name'] = sys_name + v.table_name.replace(/-/g, '') + '.csv';
|
// v['size'] = (v.data_length / 1024 / 1024).toFixed(2) * 1 + 'M'
|
});
|
this.tableData = list;
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '请求后台失败，请检查网络连接！'
|
});
|
});
|
},
|
getSysList () {
|
this.$api.file.searchAllDevice()
|
.then((res) => {
|
const data = JSON.parse(res.data.result);
|
let List = [];
|
let obj = {};
|
if (data.code == 1) {
|
List = data.data;
|
}
|
List.forEach((v) => {
|
/*if (!obj[v.sys_name]) {
|
obj[v.sys_name] = {
|
dev_id: v.dev_id,
|
txt: v.sys_name,
|
active: false,
|
cfg: v.cfg
|
};
|
}*/
|
obj[v.sys_name] = obj[v.sys_name] || {};
|
obj[v.sys_name][v.dev_id] = obj[v.sys_name][v.dev_id] || {
|
_dev_id: v.dev_id,
|
txt: v.sys_name,
|
dev_name: v.dev_name,
|
sys_name: v.sys_name,
|
active: false,
|
open: false,
|
end: true,
|
cfg: v.cfg,
|
hideState: true,
|
}
|
});
|
|
// console.log(obj, '===obj');
|
Object.keys(obj).forEach((v) => {
|
let len = Object.keys(obj[v]).length;
|
if(len == 1) {
|
Object.keys(obj[v]).forEach((value) => {
|
// console.log(obj[v][value], '1');
|
this.treeData.push(obj[v][value]);
|
});
|
} else {
|
let children = [];
|
let idx = '';
|
Object.keys(obj[v]).forEach((val) => {
|
// console.log(obj[v][val], 2);
|
children.push({
|
dev_id: obj[v][val]._dev_id,
|
txt: obj[v][val].dev_name,
|
active: false,
|
open: false,
|
end: true,
|
cfg: obj[v][val].cfg,
|
hideState: true,
|
});
|
idx = val;
|
});
|
this.treeData.push({
|
dev_id: obj[v][idx]._dev_id + '_1',
|
txt: obj[v][idx].sys_name,
|
active: false,
|
open: false,
|
end: false,
|
hideState: true,
|
children
|
});
|
}
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '请求后台失败，请检查网络连接！'
|
});
|
});
|
},
|
// 行勾选状态变化
|
selectChange (selection) {
|
this.selection = selection;
|
},
|
updateParamsClosed() {
|
|
},
|
copyText() {
|
this.$refs.backupPath.select(); // 选择对象
|
document.execCommand("Copy"); // 执行浏览器复制命令
|
this.$message({
|
type: 'success',
|
message: '复制成功',
|
});
|
},
|
// 立即备份
|
backupNow () {
|
this.$api.file.backupNow({cfg_id: this.formFtp.data.cfg_id}).then((res) => {
|
res = JSON.parse(res.data.result);
|
if (res.code) {
|
this.$message({
|
type: 'success',
|
message: '启动成功'
|
});
|
} else {
|
this.$message({
|
type: 'warning',
|
message: '启动失败'
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page-content-container {
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: 0.08rem;
|
padding-bottom: 0.08rem;
|
}
|
.page-content-left,
|
.page-content-right {
|
height: 100%;
|
}
|
.page-content-left {
|
float: left;
|
width: 3.8rem;
|
}
|
.page-content-right {
|
float: right;
|
width: calc(100vw - 4.06rem);
|
}
|
.pages-file {
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: 0.08rem;
|
padding-bottom: 0.08rem;
|
}
|
.formFtp {
|
padding: .1rem;
|
}
|
.dialog-footer {
|
box-sizing: border-box;
|
padding: 0.08rem;
|
text-align: right;
|
}
|
.el-input__icon {
|
cursor: pointer;
|
}
|
.el-input__icon:hover {
|
color: #000000;
|
}
|
.el-input__icon:active {
|
color: #FF0000;
|
}
|
</style>
|
