导读：一、导出及全量导出<template><div><a-button style="margin-left: 16px" @click="exportDataEvent">导出</a-button>..
一、导出及全量导出
<template> <div> <a-button style="margin-left: 16px" @click="exportDataEvent">导出</a-button> <a-button style="margin-left: 16px" @click="exportOfflineStart" >全量导出</a-button > <a-spin :spinning="spinning"> <vxe-table v-show="visible" ref="xTable" border :height="tableHeight" :data="rsTabData" align="center" show-header-overflow show-overflow highlight-hover-row resizable > <vxe-column field="alarmuniqueid" width="100" title="告警唯一标识" ></vxe-column> <vxe-column field="clearid" width="100" title="清除告警ID"></vxe-column> <vxe-column field="status" width="75" title="告警状态"></vxe-column> <vxe-column field="eventtime" width="100" title="告警发生时间" ></vxe-column> <vxe-column field="canceltime" width="100" title="告警清除时间" ></vxe-column> <vxe-column field="duration" width="125" title="告警时长(分钟)" ></vxe-column> <vxe-column field="alarmprovince" width="75" title="省份名称" ></vxe-column> <vxe-column field="alarmregion" width="75" title="地市名称" ></vxe-column> <vxe-column field="alarmcounty" width="75" title="区县名称" ></vxe-column> <vxe-column field="nename" width="150" title="基站名称"></vxe-column> <vxe-column field="locatenename" width="100" title="小区名称" ></vxe-column> <vxe-column field="isfarcell" width="100" title="是否为拉远小区" ></vxe-column> <vxe-column field="islongcell" width="150" title="是否为超长小区退服" ></vxe-column> <vxe-column field="equipmentclass" width="100" title="设备类型" ></vxe-column> <vxe-column field="locatenetype" width="100" title="告警对象类型" ></vxe-column> <vxe-column field="locateinfo" width="100" title="定位信息" ></vxe-column> <vxe-column field="network" width="75" title="网络类型"></vxe-column> <vxe-column field="alarmtitle" width="100" title="告警标题" ></vxe-column> <vxe-column field="vendor" width="75" title="告警厂家"></vxe-column> <vxe-column field="vendoralarmid" width="100" title="厂家告警号" ></vxe-column> <vxe-column field="neid" width="100" title="告警对象标识"></vxe-column> <vxe-column field="siteid" width="100" title="物理站址编码" ></vxe-column> <vxe-column field="roomid" width="100" title="机房id"></vxe-column> <vxe-column field="roomname" width="100" title="机房名称"></vxe-column> <vxe-column field="taccode" width="100" title="基站id"></vxe-column> <vxe-column field="tacid" width="100" title="小区id"></vxe-column> <vxe-column field="longitude" width="100" title="经度"></vxe-column> <vxe-column field="latitude" width="100" title="纬度"></vxe-column> <vxe-column field="subalarmtype" width="100" title="告警子类型" ></vxe-column> <vxe-column field="vendorseverity" width="100" title="厂家告警级别" ></vxe-column> <vxe-column field="alarmseverity" width="100" title="网管告警级别" ></vxe-column> <vxe-column field="cellrruid" width="125" title="小区对应RRU的ID" ></vxe-column> <vxe-column field="day" width="100" title="数据统计时间"></vxe-column> </vxe-table> </a-spin> <a-pagination v-if="rsTabData.length != 0" v-model="current" :page-size-options="pageSizeOptions" :total="total" size="small" show-size-changer :page-size="pageSize" style="position: fixed;bottom: 0px;right: 0px;line-height: 25px;background: #FFFFFF;color: #000000;" @showSizeChange="onShowSizeChange" @change="onChange" > </a-pagination> <!-- <a-modal title="导出配置" :visible="exportOfflineVisible" style="width:150" @cancel="handleCancel" > <a-row> <a-col> <a-form> <a-form-item label="文件名称"> <a-input v-model="exportOfflineForm.fileName" style="width: 90%;display:flex;align-items:center" placeholder="请输出文件名称" /> </a-form-item> </a-form> </a-col> </a-row> <span slot="footer"> <a-button type="primary" @click="exportOfflineStart">确 定</a-button> </span> </a-modal> --> </div> </template> <script> import { mapState } from 'vuex' import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') import { getalarmDetail, exportStart } from '@/api/gjbb/networkUpgrade' export default { components: {}, data() { return { tableHeight: 730, //全量导出参数 exportOfflineForm: { fileName: '' //导出文件名 }, exportOfflineVisible: false, spinning: false, visible: false, total: 0, rsData: {}, //查询结果 //得到的数据 rsTabData: [], startTime: '', endTime: '', alarmprovince: '', alarmregion: '', type: '', is4g: '', is5g: '', current: 1, pageSize: 20, pageSizeOptions: ['20', '100', '500'], formData: {} } }, computed: { ...mapState('account', ['user']) }, created() { this.startTime = this.getParam('startTime') this.endTime = this.getParam('endTime') this.alarmprovince = this.getParam('alarmprovince') this.alarmregion = this.getParam('alarmregion') this.type = this.getParam('type') this.is4g = this.getParam('is4g') this.is5g = this.getParam('is5g') this.queryData() }, mounted() { this.$nextTick(() => { // 页面渲染完成后的回调 // console.log(document.documentElement.clientHeight) this.tableHeight = document.documentElement.clientHeight - 135 }) }, methods: { //全量导出请求 exportOfflineStart() { let temp = '' if (this.type == '日报') { temp = '天' } else if (this.type == '周报') { temp = '周' } else { temp = '双周' } let param = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.alarmprovince, alarmregion: this.alarmregion, type: '超长小区故障详单' + temp + '表', is4g: this.is4g, is5g: this.is5g, proposer: this.user.phone, fileName: this.exportOfflineForm.fileName } // this.exportOfflineVisible = false this.$confirm({ content: '导出任务正在后台执行，跳转至导出任务列表', title: '提示', okText: '确定', cancelText: '取消', onOk: () => { this.$router.push({ path: '/export/exportList' }) }, onCancel: () => { this.$message.info('已取消') } }) exportStart(param) .then(res => { if (res.code === 1) { // this.exportOfflineVisible = false } else { this.handleFail(res) } }) .catch(res => { this.handleFail(res) }) this.exportOfflineForm.fileName = '' }, // handleCancel() { // this.exportOfflineVisible = false // }, //全量导出按钮点击响应事件 // openExportOfflineCgf() { // this.exportOfflineVisible = true // }, exportDataEvent() { this.$refs.xTable.exportData({ type: 'csv' }) }, onChange(current) { this.spinning = true this.rsTabData = [] this.current = current let param = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.alarmprovince, alarmregion: this.alarmregion, type: this.type, current: this.current, pagesize: this.pageSize, is4g: this.is4g, is5g: this.is5g } getalarmDetail(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, onShowSizeChange(current, pageSize) { this.spinning = true this.pageSize = pageSize this.rsTabData = [] this.current = 1 let param = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.alarmprovince, alarmregion: this.alarmregion, type: this.type, current: this.current, pagesize: this.pageSize, is4g: this.is4g, is5g: this.is5g } getalarmDetail(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, getParam(name) { const query = this.$route.query return query[name] }, queryData() { this.spinning = true this.formData = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.alarmprovince, alarmregion: this.alarmregion, type: this.type, current: this.current, pagesize: this.pageSize, is4g: this.is4g, is5g: this.is5g } getalarmDetail(this.formData).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, //接口请求成功处理 handleSuccess(res) { this.rsData = res.data this.rsTabData = res.data.datas this.total = this.rsData.total this.visible = true }, //接口请求失败处理 handleFail(res) { this.$message.warning('查询数据失败') } } } </script>
二、表界面
<template> <div class="p20"> <a-row :gutter="3" type="flex"> <a-col :span="4"> <a-range-picker v-model="form.date" size="small" @change="changeTime" /></a-col> <a-col :span="5"> <a-select v-model="form.jobStatus" allow-clear mode="multiple" size="small" placeholder="任务状态" style="width: 100%" > <a-select-option v-for="item in status" :key="item.value"> {{ item.title }} </a-select-option> </a-select> </a-col> <a-col :span="3"> <a-input v-model="form.fileName" size="small" placeholder="任务名称" /> </a-col> <a-col :span="1" ><a-button type="primary" size="small" @click="getData"> 查询 </a-button> </a-col> <a-col :span="11" style="text-align: right"> <a-button type="primary" size="small" shape="round" @click="deleteExportTas" > <a-icon type="delete" />删除</a-button ></a-col > </a-row> <!-- :disabled="deleteDisable" --> <a-spin :spinning="spinning"> <vxe-table ref="vxeTable" align="center" :height="tableHeight" border :data="rsTabData" :seq-config="{ startIndex: (current - 1) * pageSize }" show-header-overflow show-overflow highlight-hover-row resizable @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent" > > <vxe-column type="checkbox" width="60"></vxe-column> <vxe-column field="file_name" title="文件名称"></vxe-column> <vxe-column field="job_status" title="任务状态"> <template slot-scope="scope"> <div> <p v-if="scope.row.job_status == 0">已创建</p> <p v-if="scope.row.job_status == 1">正在进行</p> <p v-if="scope.row.job_status == 2">导出成功</p> <p v-if="scope.row.job_status == 3">上传成功</p> <p v-if="scope.row.job_status == -1">任务配置错误</p> <p v-if="scope.row.job_status == -2">导出失败</p> <p v-if="scope.row.job_status == -3">上传失败</p> </div> </template> </vxe-column> <vxe-column field="start_time" title="任务开始时间"></vxe-column> <vxe-column field="end_time" title="任务结束时间"></vxe-column> <vxe-column field="proposer" title="创建人"></vxe-column> <vxe-column field="create_time" title="创建时间"></vxe-column> <vxe-column field="file_lines" title="总条数"></vxe-column> <vxe-column field="file_pwd" title="解压密码"></vxe-column> <vxe-column title="操作"> <template #default="{ row }"> <vxe-button v-if="row.job_status == 3" type="text" status="primary" @click="downloadTask(row)" ><a-icon type="download" /></vxe-button> </template> </vxe-column> </vxe-table> </a-spin> <a-pagination v-if="rsTabData.length != 0" v-model="current" size="small" show-size-changer :page-size-options="pageSizeOptions" style="position: fixed;bottom: 0px;right: 0px;line-height: 25px;background: #FFFFFF;color: #000000;" :total="total" :page-size="pageSize" @showSizeChange="onShowSizeChange" @change="onChange" /> </div> </template> <script> import Vue from 'vue' import { mapState } from 'vuex' import axios from 'axios' import { queryExportList, exportDelete, deleteFtpFile } from '@/api/gjbb/networkUpgrade' export default { data() { return { tableHeight: 710, records: {}, //选中的数据 selectedData: [], total: 0, rsData: {}, //查询结果 //得到的数据 rsTabData: [], spinning: false, height: 0, //是否加载中 loading: false, form: { date: [], fileName: '', startTime: '', endTime: '', jobStatus: [] }, //当前页数 current: 1, //每页条目数量 pageSize: 15, pageSizeOptions: ['15', '100', '500'], //任务状态数据 status: [ { value: 0, title: '已创建' }, { value: 1, title: '正在进行' }, { value: -1, title: '任务配置错误' }, { value: 2, title: '导出成功' }, { value: -2, title: '导出失败' }, { value: 3, title: '上传成功' }, { value: -3, title: '上传失败' } ], //表格数据 tableData: [], selectedRowKeys: [] } }, computed: { ...mapState('account', ['user']) }, created() { this.initData() this.getData() setInterval(() => { this.getData() }, 10000) }, mounted() { this.$nextTick(() => { // 页面渲染完成后的回调 // console.log(document.documentElement.clientHeight) this.tableHeight = document.documentElement.clientHeight - 155 }) }, methods: { onChange(current) { this.spinning = true this.rsTabData = [] this.current = current let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, onShowSizeChange(current, pageSize) { this.spinning = true this.pageSize = pageSize this.rsTabData = [] this.current = 1 let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, selectAllEvent({ records }) { this.records = records }, selectChangeEvent({ records }) { this.records = records }, deleteExportTas() { let arr = [] for (let i = 0; i < this.records.length; i++) { arr.push(this.records[i].job_id) } let params = { jobIds: arr } exportDelete(params) let temp = { fileNames: arr } deleteFtpFile(temp) this.getData() }, // 下载导出任务 downloadTask(val) { axios .get( 'http://10.245.0.122:11088/openapi/selfDb/export/downFile?fileName=' + val.file_name, { // url中/api是前端解决跨域问题的 headers: { // 这里需要使用form-data格式数据发送请求 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' // 下载zip文件需要使用的响应格式,这是区别于普通post请求的地方,重点!!! } ) .then(response => { var zipName = val.file_name // 下载的文件名 let blob = new Blob([response.data], { type: 'application/zip' }) // 下载格式为zip if ('download' in document.createElement('a')) { let elink = document.createElement('a') // 创建一个<a>标签 elink.style.display = 'none' // 隐藏标签 elink.href = window.URL.createObjectURL(blob) // 配置href elink.download = zipName elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) // 移除<a>标签 } else { //IE10+ navigator.msSaveBlob(blob, zipName) } }) .catch(error => { console.log('download error (batch)') console.log(error) }) }, getData() { this.spinning = true let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, //接口请求成功处理 handleSuccess(res) { this.rsData = res.data this.rsTabData = res.data.exportDatas this.total = this.rsData.total }, //接口请求失败处理 handleFail(res) { this.$message.warning('查询数据失败') }, //初始化数据 initData() { const time = new Date() this.form.startTime = this.$dayjs(time) .startOf('day') .format('YYYY-MM-DD 00:00:00') this.form.endTime = this.$dayjs(time) .endOf('day') .format('YYYY-MM-DD 23:59:59') }, //时间选择器改变响应事件 changeTime(val) { this.form.startTime = this.$dayjs(val[0]) .startOf('day') .format('YYYY-MM-DD 00:00:00') this.form.endTime = this.$dayjs(val[1]) .endOf('day') .format('YYYY-MM-DD 23:59:59') } } } </script> <style scoped> ::v-deep .ant-select-selection__choice__remove { display: none; } ::v-deep .ant-select-selection--multiple .ant-select-selection__choice { position: relative; float: left; max-width: 99%; margin-right: 4 px; padding: 0 10px 0 10px !important; overflow: hidden; color: rgba(0, 0, 0, 0.65); background-color: #fafafa; border: 1 px solid #f0f0f0; border-radius: 2 px; cursor: default; -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .p20 { padding: 20px; } .ptb10 { padding: 10px 0; } </style>
三、当前页面导出
<template> <div> <a-form-model ref="ruleForm" layout="inline" :model="form" :rules="rules"> <a-form-model-item label="省份" style="margin-left: 5px" prop="province"> <a-select v-model="form.province" style="width: 200px" placeholder="选择省份" :options="provinceDataOptions" @change="selectProvince" ></a-select> </a-form-model-item> <a-form-model-item label="地市" style="margin-left: 5px"> <a-select v-model="form.city" style="width: 200px" placeholder="选择地市" :options="cityDataOptions" ></a-select> </a-form-model-item> <a-form-model-item label="类型" style="margin-left: 5px" prop="type"> <a-select v-model="form.type" style="width: 200px" placeholder="选择类型" :options="typeDataOptions" @change="handleChangeType" ></a-select> </a-form-model-item> <a-form-model-item label="时间" style="margin-left: 5px" prop="date"> <a-date-picker v-if="form.type == '4G日报' || form.type == '5G日报'" v-model="form.date" placeholder="选择时间" :disabled-date="disabledDate" > <a-icon slot="suffixIcon" type="calendar" /> </a-date-picker> <a-select v-if="form.type == '4G周报' || form.type == '5G周报'" v-model="form.date" style="width: 200px" placeholder="选择时间" :options="weekDataOptions" @change="handleChangeWeek" > <a-icon slot="suffixIcon" type="calendar" /></a-select> <a-select v-if="form.type == '4G双周报' || form.type == '5G双周报'" v-model="form.date" style="width: 200px" placeholder="选择时间" :options="weekDoubleDataOptions" @change="handleChangeDoubleWeek" > <a-icon slot="suffixIcon" type="calendar" /></a-select> </a-form-model-item> </a-form-model> <a-form-model layout="inline"> <a-form-model-item style="margin-left: 5px"> <a-button type="primary" icon="search" @click="queryData"> 查询 </a-button> </a-form-model-item> <a-form-model-item style="margin-left: 5px"> <a-button type="primary" icon="redo" @click="handleSearchReset"> 重置 </a-button> </a-form-model-item> <a-form-model-item style="margin-left: 5px"> <a-button type="primary" icon="download" @click="exportDataEvent"> 导出 </a-button> </a-form-model-item> </a-form-model> <a-spin :spinning="spinning"> <vxe-table ref="vxeTable" align="center" :height="tableHeight" border :data="rsTabData" :seq-config="{ startIndex: (current - 1) * pageSize }" :menu-config="tableMenu" show-header-overflow show-overflow highlight-hover-row resizable @menu-click="detail" > <!-- 添加序号列 --> <vxe-column :width="60" type="seq" title="序号" show-overflow ></vxe-column> <vxe-column field="alarmprovince" title="省份"></vxe-column> <vxe-column field="alarmregion" :visible="visible" title="地市" ></vxe-column> <vxe-column field="longcell_outservice_cnt" title="超长小区退服个数" ></vxe-column> <vxe-column field="longcell_outservice_times" title="超长小区退服次数" ></vxe-column> <vxe-column field="longcell_outservice_duration" title="超长小区退服时长" ></vxe-column> <vxe-column field="allcell_outservice_cnt" title="全量小区退服个数" ></vxe-column> <vxe-column field="allcell_outservice_times" title="全量小区退服次数" ></vxe-column> <vxe-column field="cell_cnt" title="全量小区个数"></vxe-column> <vxe-column field="allcell_outservice_duration" title="全量小区退服时长" ></vxe-column> <vxe-column field="longcell_outservice_times_rate" title="超长退服次数占比" ></vxe-column ><vxe-column field="longcell_outservice_duration_rate" title="超长退服时长占比" ></vxe-column> <vxe-column field="day" title="数据统计日期"></vxe-column> </vxe-table> </a-spin> <a-pagination v-if="rsTabData.length != 0" v-model="current" :page-size-options="pageSizeOptions" :total="total" size="small" show-size-changer :page-size="pageSize" style="position: fixed;bottom: 0px;right: 0px;line-height: 25px;background: #FFFFFF;color: #000000;" @showSizeChange="onShowSizeChange" @change="onChange" > </a-pagination> </div> </template> <script> import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') import { getLongCellData, selectProvince, selectCity } from '@/api/gjbb/networkUpgrade' export default { data() { return { visible: true, tableHeight: 580, startTime: '', endTime: '', is4g: '', is5g: '', tableMenu: { body: { options: [ [ { name: '查看详情', prefixIcon: 'fa fa-detail', visible: true, disabled: false } ] ] } }, weekFindDataOptions: [], weekFindDoubleDataOptions: [], week: null, doubleWeek: null, weekDataOptions: [], weekDoubleDataOptions: [], startDataOptions: [], endDataOptions: [], startDoubleDataOptions: [], endDoubleDataOptions: [], date: this.$dayjs() .add(-1, 'days') .toDate(), formData: {}, total: 0, rsData: {}, //查询结果 current: 1, pageSizeOptions: ['20', '100', '500'], pageSize: 20, spinning: false, form: { //省份 province: undefined, //地市 city: undefined, type: undefined, date: undefined }, rules: { province: [ { required: true, message: '请选择省份', trigger: 'change' } ], type: [ { required: true, message: '请选择类型', trigger: 'change' } ], date: [ { required: true, message: '请在选择类型后选择时间', trigger: 'change' } ] }, //得到的数据 rsTabData: [], provinceDataOptions: [], provinceAdcodeDataOptions: [], provinceFindDataOptions: [], cityDataOptions: [], typeDataOptions: [ { label: '4G日报', value: '4G日报' }, { label: '5G日报', value: '5G日报' }, { label: '4G周报', value: '4G周报' }, { label: '5G周报', value: '5G周报' }, { label: '4G双周报', value: '4G双周报' }, { label: '5G双周报', value: '5G双周报' } ] } }, computed: {}, created() { this.weekDataOptionsComputed() this.weekDoubleDataOptionsComputed() this.getProvinceMysqlData() }, mounted() { this.$nextTick(() => { // 页面渲染完成后的回调 // console.log(document.documentElement.clientHeight) this.tableHeight = document.documentElement.clientHeight - 190 }) }, methods: { onChange(current) { this.spinning = true this.rsTabData = [] this.current = current //判断报表类型是日报，周报还是双周报 if (this.form.type.slice(2) == '日报') { this.startTime = this.form.date.format('YYYYMMDD') this.endTime = this.form.date.format('YYYYMMDD') } else if (this.form.type.slice(2) == '周报') { this.startTime = this.startDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] this.endTime = this.endDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] } else { ;(this.startTime = this.startDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]), (this.endTime = this.endDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]) } let param = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.form.province, alarmregion: this.form.city, type: this.form.type, current: this.current, pagesize: this.pageSize } getLongCellData(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, onShowSizeChange(current, pageSize) { this.spinning = true this.pageSize = pageSize this.rsTabData = [] current = 1 this.current = 1 //判断报表类型是日报，周报还是双周报 if (this.form.type.slice(2) == '日报') { this.startTime = this.form.date.format('YYYYMMDD') this.endTime = this.form.date.format('YYYYMMDD') } else if (this.form.type.slice(2) == '周报') { this.startTime = this.startDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] this.endTime = this.endDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] } else { ;(this.startTime = this.startDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]), (this.endTime = this.endDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]) } let param = { startTime: this.startTime, endTime: this.endTime, alarmprovince: this.form.province, alarmregion: this.form.city, type: this.form.type, current: this.current, pagesize: this.pageSize } getLongCellData(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.startTime = '' this.endTime = '' this.spinning = false }, handleSearchReset() { ;(this.form.city = ''), (this.cityDataOptions = []), this.$refs.ruleForm.resetFields() }, detail(vm) { //判断是4g业务详单还是5g业务详单 if (this.form.type.slice(0, 1) == '4') { this.is4g = '1' this.is5g = '' } else { this.is4g = '' this.is5g = '1' } //判断报表类型是日报，周报还是双周报 if (this.form.type.slice(2) == '日报') { this.startTime = this.form.date.format('YYYYMMDD') this.endTime = this.form.date.format('YYYYMMDD') } else if (this.form.type.slice(2) == '周报') { this.startTime = this.startDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] this.endTime = this.endDataOptions[ this.weekFindDataOptions.indexOf(this.week) ] } else { ;(this.startTime = this.startDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]), (this.endTime = this.endDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ]) } this.$router.push({ path: '/gjbb/networkUpgrade/CcXqGzList', query: { startTime: this.startTime, endTime: this.endTime, alarmprovince: vm.row.alarmprovince, alarmregion: vm.row.alarmregion, type: this.form.type.slice(2), is4g: this.is4g, is5g: this.is5g } }) }, handleChangeType() { this.form.date = '' }, handleChangeWeek(value) { this.week = value }, handleChangeDoubleWeek(value) { this.doubleWeek = value }, weekDataOptionsComputed() { var aData = new Date() this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate() let aa = this.DateDiff(this.value, '2021-11-4') let bb = Math.floor(aa / 7) var oriData = new Date('2021-11-4') var iToDay = oriData.getDate() var iToMon = oriData.getMonth() var iToYear = oriData.getFullYear() let arr = [] let arrStart = [] let arrEnd = [] let arrFind = [] for (let i = 0; i < bb; i++) { var newDateStart = new Date(iToYear, iToMon, iToDay + 7 * i) var newDateEnd = new Date(iToYear, iToMon, iToDay + 7 * i + 6) let cc = [] let dd = [] // let cc = this.$dayjs(newDateStart).format('YYYYMMDD') // let dd = this.$dayjs(newDateEnd).format('YYYYMMDD') if (newDateStart.getMonth() + 1 < 10 && newDateStart.getDate() < 10) { cc = newDateStart.getFullYear() + '-' + '0' + (newDateStart.getMonth() + 1) + '-' + '0' + newDateStart.getDate() } else if (newDateStart.getDate() < 10) { cc = newDateStart.getFullYear() + '-' + (newDateStart.getMonth() + 1) + '-' + '0' + newDateStart.getDate() } else if (newDateStart.getMonth() + 1 < 10) { cc = newDateStart.getFullYear() + '-' + '0' + (newDateStart.getMonth() + 1) + '-' + newDateStart.getDate() } else { cc = newDateStart.getFullYear() + '-' + (newDateStart.getMonth() + 1) + '-' + newDateStart.getDate() } if (newDateEnd.getMonth() + 1 < 10 && newDateEnd.getDate() < 10) { dd = newDateEnd.getFullYear() + '-' + '0' + (newDateEnd.getMonth() + 1) + '-' + '0' + newDateEnd.getDate() } else if (newDateEnd.getDate() < 10) { dd = newDateEnd.getFullYear() + '-' + (newDateEnd.getMonth() + 1) + '-' + '0' + newDateEnd.getDate() } else if (newDateEnd.getMonth() + 1 < 10) { dd = newDateEnd.getFullYear() + '-' + '0' + (newDateEnd.getMonth() + 1) + '-' + newDateEnd.getDate() } else { dd = newDateEnd.getFullYear() + '-' + (newDateEnd.getMonth() + 1) + '-' + newDateEnd.getDate() } arr.push({ label: cc + '--' + dd, value: cc + '--' + dd }) arrFind.push(cc + '--' + dd) // arrStart.push(cc) // arrEnd.push(dd) let ee = cc.split('-') let ff = dd.split('-') arrStart.push(ee[0] + ee[1] + ee[2]) arrEnd.push(ff[0] + ff[1] + ff[2]) // let ee = arr[i].value.split('-') // console.log(arr.indexOf(arr[i])) // console.log(ee[0] + ee[1] + ee[2]) } // console.log(newDateStart) // console.log(arrStart) // console.log(arr) this.weekDataOptions = arr this.startDataOptions = arrStart this.endDataOptions = arrEnd this.weekFindDataOptions = arrFind }, weekDoubleDataOptionsComputed() { var aData = new Date() this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate() let aa = this.DateDiff(this.value, '2021-11-4') let bb = Math.floor(aa / 14) var oriData = new Date('2021-11-4') var iToDay = oriData.getDate() var iToMon = oriData.getMonth() var iToYear = oriData.getFullYear() let arr = [] let arrStart = [] let arrEnd = [] let arrFind = [] for (let i = 0; i < bb; i++) { var newDateStart = new Date(iToYear, iToMon, iToDay + 14 * i) var newDateEnd = new Date(iToYear, iToMon, iToDay + 14 * i + 13) let cc = [] let dd = [] if (newDateStart.getMonth() + 1 < 10 && newDateStart.getDate() < 10) { cc = newDateStart.getFullYear() + '-' + '0' + (newDateStart.getMonth() + 1) + '-' + '0' + newDateStart.getDate() } else if (newDateStart.getDate() < 10) { cc = newDateStart.getFullYear() + '-' + (newDateStart.getMonth() + 1) + '-' + '0' + newDateStart.getDate() } else if (newDateStart.getMonth() + 1 < 10) { cc = newDateStart.getFullYear() + '-' + '0' + (newDateStart.getMonth() + 1) + '-' + newDateStart.getDate() } else { cc = newDateStart.getFullYear() + '-' + (newDateStart.getMonth() + 1) + '-' + newDateStart.getDate() } if (newDateEnd.getMonth() + 1 < 10 && newDateEnd.getDate() < 10) { dd = newDateEnd.getFullYear() + '-' + '0' + (newDateEnd.getMonth() + 1) + '-' + '0' + newDateEnd.getDate() } else if (newDateEnd.getDate() < 10) { dd = newDateEnd.getFullYear() + '-' + (newDateEnd.getMonth() + 1) + '-' + '0' + newDateEnd.getDate() } else if (newDateEnd.getMonth() + 1 < 10) { dd = newDateEnd.getFullYear() + '-' + '0' + (newDateEnd.getMonth() + 1) + '-' + newDateEnd.getDate() } else { dd = newDateEnd.getFullYear() + '-' + (newDateEnd.getMonth() + 1) + '-' + newDateEnd.getDate() } arr.push({ label: cc + '--' + dd, value: cc + '--' + dd }) arrFind.push(cc + '--' + dd) // arrStart.push(cc) // arrEnd.push(dd) let ee = cc.split('-') let ff = dd.split('-') arrStart.push(ee[0] + ee[1] + ee[2]) arrEnd.push(ff[0] + ff[1] + ff[2]) // let ee = arr[i].value.split('-') // console.log(arr.indexOf(arr[i])) // console.log(ee[0] + ee[1] + ee[2]) } // console.log(arrStart) // console.log(arrEnd) this.weekDoubleDataOptions = arr this.weekFindDoubleDataOptions = arrFind this.startDoubleDataOptions = arrStart this.endDoubleDataOptions = arrEnd }, DateDiff(sDate1, sDate2) { // sDate1和sDate2是2021-11-04格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split('-') oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]) aDate = sDate2.split('-') oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数 return iDays }, exportDataEvent() { this.$refs.vxeTable.exportData({ type: 'csv' }) }, //查询数据 queryData() { this.$refs.ruleForm.validate(valid => { if (valid) { this.current = 1 this.spinning = true if (this.form.province == '全国') { this.visible = false } else { this.visible = true } console.log(this.visible) if (this.form.type == '4G日报' || this.form.type == '5G日报') { this.formData = { startTime: this.form.date.format('YYYYMMDD'), endTime: this.form.date.format('YYYYMMDD'), alarmprovince: this.form.province, alarmregion: this.form.city, type: this.form.type, current: this.current, pagesize: this.pageSize } } else if (this.form.type == '4G周报' || this.form.type == '5G周报') { this.formData = { startTime: this.startDataOptions[ this.weekFindDataOptions.indexOf(this.week) ], endTime: this.endDataOptions[ this.weekFindDataOptions.indexOf(this.week) ], alarmprovince: this.form.province, alarmregion: this.form.city, type: this.form.type, current: this.current, pagesize: this.pageSize } } else if ( this.form.type == '4G双周报' || this.form.type == '5G双周报' ) { this.formData = { startTime: this.startDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ], endTime: this.endDoubleDataOptions[ this.weekFindDoubleDataOptions.indexOf(this.doubleWeek) ], alarmprovince: this.form.province, alarmregion: this.form.city, type: this.form.type, current: this.current, pagesize: this.pageSize } } getLongCellData(this.formData).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) } else { this.$message.error('数据查询失败') return false } this.spinning = false }) }, disabledDate(current) { const date = new Date('2021-11-04') return ( current < moment() .year(date.getFullYear()) .month(date.getMonth()) .date(date.getDate() - 1) ) }, //接口请求成功处理 handleSuccess(res) { this.rsData = res.data this.rsTabData = res.data.datas this.total = this.rsData.total }, //接口请求失败处理 handleFail() { this.$message.warning('查询数据失败') }, getProvinceMysqlData() { selectProvince().then(res => { if (res.data) { let temp = [] let tempAdcode = [] let tempFind = [] temp.push({ label: '全国', value: '全国' }) tempAdcode.push('000000') tempFind.push('全国') res.data.forEach(function(element) { temp.push({ label: element.name, value: element.name }) tempAdcode.push(element.id) tempFind.push(element.name) }) this.provinceDataOptions = temp this.provinceAdcodeDataOptions = tempAdcode this.provinceFindDataOptions = tempFind } }) }, getCityMysqlData() { let param = { adcode: this.provinceAdcodeDataOptions[ this.provinceFindDataOptions.indexOf(this.form.province) ] } selectCity(param).then(res => { if (res.data) { let temp = [] res.data.forEach(function(element) { temp.push({ label: element.name, value: element.name }) }) this.cityDataOptions = temp } }) }, //切换省份触发事件 selectProvince() { this.form.city = '' this.getCityMysqlData() } } } </script>
<template> <div style="display: flex; flex-direction: row"> <a-row :gutter="3" type="flex" style="margin-bottom: 20px;"> <a-col> <div style="margin-bottom: 20px;"> <span style="font-weight: 900;">字段选择</span> </div> <!-- :disabled="deleteDisable" --> <a-spin :spinning="spinning"> <vxe-table ref="vxeTable" align="center" :height="tableHeight" max-height="600px" border :data="rsTabData" :seq-config="{ startIndex: (current - 1) * pageSize }" show-header-overflow show-overflow highlight-hover-row resizable @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent" > > <vxe-column type="checkbox" width="120"></vxe-column> <vxe-column field="file_name" title="文件名称" width="240px" ></vxe-column> </vxe-table> </a-spin> <a-pagination v-if="rsTabData.length != 0" v-model="current" size="small" show-size-changer :page-size-options="pageSizeOptions" style="position: fixed;bottom: 0px;right: 0px;line-height: 25px;background: #FFFFFF;color: #000000;" :total="total" :page-size="pageSize" @showSizeChange="onShowSizeChange" @change="onChange" /> </a-col> <a-col> <div style="margin-bottom: 20px;"> <span style="font-weight: 900;margin-left: 100px;">导出文件设置</span> </div> <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-model-item v-bind="formItemLayout"> <span slot="label">文件名</span> <a-input v-model="form.filename" placeholder="以默认格式填充" /> </a-form-model-item> <a-form-model-item v-bind="formItemLayout"> <span slot="label">文件筛选筛选条件</span> <a-select v-model="form.filetype" placeholder="CSV"> <a-select-option value="shanghai"> CSV </a-select-option> <a-select-option value="beijing"> Excel </a-select-option> <a-select-option value="beijing"> Txt </a-select-option> </a-select> </a-form-model-item> <a-form-model-item v-bind="formItemLayout"> <span slot="label">文件最大行数</span> <a-input-number v-decorator="['文件最大行数', { initialValue: 3 }]" :min="1" :max="10" /> </a-form-model-item> <a-form-model-item v-bind="formItemLayout"> <span slot="label">文件筛选筛选条件</span> <a-textarea v-model="value" placeholder="一个筛选条件一行，用分号分隔;" :auto-size="{ minRows: 3, maxRows: 5 }" /> </a-form-model-item> <a-form-model-item style=" margin-left: 50px;"> <a-button type="primary"> 当前页面导出 </a-button> <a-button type="primary" style=" margin-left: 10px;"> 全量导出 </a-button> <a-button type="primary" style=" margin-left: 10px;"> 取消 </a-button> </a-form-model-item> </a-form-model> </a-col> </a-row> </div> </template> <script> import Vue from 'vue' import { mapState } from 'vuex' import axios from 'axios' import { queryExportList, exportDelete, deleteFtpFile } from '@/api/gjbb/networkUpgrade' export default { data() { return { formItemLayout: { labelCol: { span: 14 }, wrapperCol: { span: 10 } }, tableHeight: 710, records: {}, //选中的数据 selectedData: [], total: 0, rsData: {}, //查询结果 //得到的数据 rsTabData: [], spinning: false, height: 0, //是否加载中 loading: false, form: { date: [], fileName: '', startTime: '', endTime: '', jobStatus: [] }, //当前页数 current: 1, //每页条目数量 pageSize: 15, pageSizeOptions: ['15', '100', '500'], //任务状态数据 status: [ { value: 0, title: '已创建' }, { value: 1, title: '正在进行' }, { value: -1, title: '任务配置错误' }, { value: 2, title: '导出成功' }, { value: -2, title: '导出失败' }, { value: 3, title: '上传成功' }, { value: -3, title: '上传失败' } ], //表格数据 tableData: [], selectedRowKeys: [] } }, colums: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age', width: '12%' }, { title: 'Address', dataIndex: 'address', width: '30%', key: 'address' } ], tabledata: [], computed: { ...mapState('account', ['user']) }, created() { this.initData() this.getData() setInterval(() => { this.getData() }, 10000) }, mounted() { this.$nextTick(() => { // 页面渲染完成后的回调 // console.log(document.documentElement.clientHeight) this.tableHeight = document.documentElement.clientHeight - 155 }) }, beforeCreate() { this.form = this.$form.createForm(this, { name: 'validate_other' }) }, methods: { handleSubmit(e) { e.preventDefault() this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values) } }) }, onChange(current) { this.spinning = true this.rsTabData = [] this.current = current let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, onShowSizeChange(current, pageSize) { this.spinning = true this.pageSize = pageSize this.rsTabData = [] this.current = 1 let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, selectAllEvent({ records }) { this.records = records }, selectChangeEvent({ records }) { this.records = records }, deleteExportTas() { let arr = [] for (let i = 0; i < this.records.length; i++) { arr.push(this.records[i].job_id) } let params = { jobIds: arr } exportDelete(params) let temp = { fileNames: arr } deleteFtpFile(temp) this.getData() }, // 下载导出任务 downloadTask(val) { axios .get( 'http://10.245.0.122:11088/openapi/selfDb/export/downFile?fileName=' + val.file_name, { // url中/api是前端解决跨域问题的 headers: { // 这里需要使用form-data格式数据发送请求 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' // 下载zip文件需要使用的响应格式,这是区别于普通post请求的地方,重点!!! } ) .then(response => { var zipName = val.file_name // 下载的文件名 let blob = new Blob([response.data], { type: 'application/zip' }) // 下载格式为zip if ('download' in document.createElement('a')) { let elink = document.createElement('a') // 创建一个<a>标签 elink.style.display = 'none' // 隐藏标签 elink.href = window.URL.createObjectURL(blob) // 配置href elink.download = zipName elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) // 移除<a>标签 } else { //IE10+ navigator.msSaveBlob(blob, zipName) } }) .catch(error => { console.log('download error (batch)') console.log(error) }) }, getData() { this.spinning = true let param = { startTime: this.form.startTime, endTime: this.form.endTime, fileName: this.form.fileName, jobStatus: this.form.jobStatus, current: this.current, pagesize: this.pageSize, proposer: this.user.phone } queryExportList(param).then(res => { if (res.code === 1 && res.data) { this.handleSuccess(res) } else { this.handleFail(res) } }) this.spinning = false }, //接口请求成功处理 handleSuccess(res) { this.rsData = res.data this.rsTabData = res.data.exportDatas this.total = this.rsData.total }, //接口请求失败处理 handleFail(res) { this.$message.warning('查询数据失败') }, //初始化数据 initData() { const time = new Date() this.form.startTime = this.$dayjs(time) .startOf('day') .format('YYYY-MM-DD 00:00:00') this.form.endTime = this.$dayjs(time) .endOf('day') .format('YYYY-MM-DD 23:59:59') }, //时间选择器改变响应事件 changeTime(val) { this.form.startTime = this.$dayjs(val[0]) .startOf('day') .format('YYYY-MM-DD 00:00:00') this.form.endTime = this.$dayjs(val[1]) .endOf('day') .format('YYYY-MM-DD 23:59:59') } } } </script> <style scoped> ::v-deep .ant-select-selection__choice__remove { display: none; } ::v-deep .ant-select-selection--multiple .ant-select-selection__choice { position: relative; float: left; max-width: 99%; margin-right: 4 px; padding: 0 10px 0 10px !important; overflow: hidden; color: rgba(0, 0, 0, 0.65); background-color: #fafafa; border: 1 px solid #f0f0f0; border-radius: 2 px; cursor: default; -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .p20 { padding: 20px; } .ptb10 { padding: 10px 0; } </style>
更多文章请关注《万象专栏》
转载请注明出处：https://www.wanxiangsucai.com/read/cv72899