|
|
@@ -0,0 +1,244 @@
|
|
|
+ <template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>短期数据修改</span>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" size="small" @click="insertEvent" style="round-clip: 10px">新增</el-button>
|
|
|
+<!-- <el-button type="primary" size="small" :loading="loading" @click="cutOutSpeedSpecifyInfo" style="round-clip: 10px">读取excel</el-button>-->
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="id"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="startTime"
|
|
|
+ label="开始时间"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="endTime"
|
|
|
+ label="结束时间"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="modulus"
|
|
|
+ label="修改系数"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页-->
|
|
|
+ <el-row style="margin-top: 10px;">
|
|
|
+ <el-col>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 50,]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ background
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog
|
|
|
+ title="短期数据修改"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="form" label-width="120px" :rules="rules">
|
|
|
+ <el-form-item label="开始时间" prop="startTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.startTime"
|
|
|
+ style="width: 70%" :picker-options="pickerOptions1"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="endTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.endTime"
|
|
|
+ style="width: 70%" :picker-options="pickerOptions1"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="系数" prop="modulus">
|
|
|
+ <el-input v-model="form.modulus" placeholder="输入整数或者1位小数如：1.2" style="width: 70%"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveRowEvent">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "ModifyShorterData",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ form: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ // 当前页
|
|
|
+ currentPage: 1,
|
|
|
+ // 当前页有几条数据
|
|
|
+ pageSize: 10,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ rules: {
|
|
|
+ startTime: [
|
|
|
+ {required: true, message: '开始时间不能为空'},
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ {required: true, message: '结束时间不能为空'},
|
|
|
+ ],
|
|
|
+ modulus: [
|
|
|
+ {required: true, message: '系数不能为空'},
|
|
|
+ { pattern: /^\d+(\.\d{1})?$/, message: '只能输入正数数字或带一位小数的数字' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ //当前日期之前日期不可选
|
|
|
+ pickerOptions1: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() < Date.now() - 8.64e7;
|
|
|
+ // return time.getTime() <= Date.now();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取分页数据
|
|
|
+ initPage() {
|
|
|
+ this.$axios.get("/modifyShorterData/" + this.currentPage + '/' + this.pageSize).then(response => {
|
|
|
+ this.tableData = response.data.content
|
|
|
+ this.total = response.data.count
|
|
|
+ })
|
|
|
+ },
|
|
|
+ insertEvent() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ saveRowEvent() {
|
|
|
+
|
|
|
+ this.$axios.post('/modifyShorterData', this.form).then(res => {
|
|
|
+ this.$message.success(
|
|
|
+ res.message
|
|
|
+ )
|
|
|
+ this.initPage()
|
|
|
+ }).catch(e => {
|
|
|
+ this.$message.error(e)
|
|
|
+ })
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.initPage()
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ this.form = JSON.parse(JSON.stringify(row))
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.initPage()
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ this.$XModal.confirm('您确定要删除该数据?').then(type => {
|
|
|
+ if (type === 'confirm') {
|
|
|
+ this.$axios.delete("/modifyShorterData/", {data: row}).then(response => {
|
|
|
+ this.$XModal.message({status: 'warning', message: response.message})
|
|
|
+ this.initPage()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // pageSize 改变时会触发
|
|
|
+ handleSizeChange(pageSize) {
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.initPage()
|
|
|
+ },
|
|
|
+ // 改currentPage 改变时会触发
|
|
|
+ handleCurrentChange(pageNum) {
|
|
|
+ this.currentPage = pageNum
|
|
|
+ this.initPage()
|
|
|
+ },
|
|
|
+ cutOutSpeedSpecifyInfo() {
|
|
|
+ this.loading = true
|
|
|
+ this.$axios.get("/readToMysql/cutOutSpeedSpecifyInfo").then((res=>{
|
|
|
+ this.$message.success(
|
|
|
+ res.message
|
|
|
+ )
|
|
|
+ this.loading = false
|
|
|
+ this.initPage()
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initPage()
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ background: transparent;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-button {
|
|
|
+ round-clip: 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid #fff;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table, .el-table__expanded-cell {
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table tr {
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body td, ::v-deep .el-table__header th, .el-table .cell {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table::before {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+</style>
|
songhaodong