458 lines
17 KiB
HTML
458 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
|
||
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
||
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
||
<script type="text/javascript" src="./libs/element-uiV2.15.1.js"></script>
|
||
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
||
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
||
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
||
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
||
<link rel="stylesheet" href="./styles/element-uiV2.15.1.css" />
|
||
<title id="titname">demo</title>
|
||
<style type="text/css" media="screen">
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
height: 100%;
|
||
font: 14px Microsoft YaHei;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
/* background: url(./assets/images/login.png) no-repeat; */
|
||
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
||
background-size: 100% 100%;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
.content {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
margin-top: 1%;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.content .list-table {
|
||
height: calc(100% - 60px);
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.preDealtail .label {
|
||
margin: 40px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-table--scrollable-x .el-table__body-wrapper {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.el-table__fixed-right {
|
||
right: 5px !important;
|
||
/* 竖向滚动条宽度 */
|
||
height: 100%;
|
||
}
|
||
|
||
.el-table td,
|
||
.el-table th {
|
||
padding: 12px 0
|
||
}
|
||
|
||
.el-table__fixed-right {
|
||
right: 0px !important;
|
||
height: 100%;
|
||
}
|
||
|
||
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
||
height: auto !important;
|
||
/* bottom: 4px !important; */
|
||
max-height: 100% !important
|
||
}
|
||
|
||
.el-table__fixed-right-patch {
|
||
width: 5px !important;
|
||
}
|
||
|
||
.el-table__fixed {
|
||
height: auto !important;
|
||
bottom: 0px !important;
|
||
}
|
||
|
||
.el-table__fixed .el-table__fixed-body-wrapper {
|
||
/* height: 503px !important; */
|
||
bottom: 0px !important;
|
||
max-height: 100% !important
|
||
}
|
||
|
||
.el-table--scrollable-x .el-table__fixed {
|
||
height: auto !important;
|
||
bottom: 0px !important;
|
||
}
|
||
|
||
.el-table--scrollable-x .el-table__fixed-right {
|
||
bottom: 0px !important;
|
||
}
|
||
|
||
.el-table--scrollable-y .el-table__fixed-right {
|
||
right: 5px !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||
height: 7px !important;
|
||
}
|
||
|
||
.el-table--fluid-height .el-table__fixed {
|
||
bottom: 0px !important;
|
||
}
|
||
|
||
.el-button {
|
||
border-radius: 0px !important;
|
||
}
|
||
|
||
.el-table__body-wrapper::-webkit-scrollbar {
|
||
width: 0px;
|
||
height: 6px;
|
||
}
|
||
|
||
/* //注意:hover */
|
||
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
|
||
/* // 滚动条的滑块 */
|
||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background-color: #ddd;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.el-table__body-wrapper {
|
||
height: 510px !important;
|
||
}
|
||
|
||
.el-scrollbar__wrap::-webkit-scrollbar {
|
||
width: 6PX !important;
|
||
height: 6PX !important;
|
||
}
|
||
|
||
|
||
.el-table__fixed,
|
||
.el-table__fixed-right {
|
||
/* height: calc(100% - 6PX) !important; */
|
||
}
|
||
|
||
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
|
||
height: 100% !important;
|
||
bottom: 0 !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.el-table--scrollable-y .el-table__fixed-right {
|
||
right: 6PX !important;
|
||
}
|
||
|
||
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
|
||
right: 0 !important;
|
||
}
|
||
|
||
.el-table__footer-wrapper tbody td,
|
||
.el-table__header-wrapper tbody td {
|
||
text-align: center;
|
||
}
|
||
|
||
/*
|
||
.el-table__footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
} */
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="content" id="app">
|
||
|
||
<div>
|
||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||
<el-form-item label="水表名称：">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="时间：">
|
||
<el-radio-group v-model="form.resource" @change="handleChange">
|
||
<el-radio label="月">月</el-radio>
|
||
<el-radio label="日">日</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-date-picker v-model="form.month" v-show="form.resource=='月'" type="month" placeholder="选择月"
|
||
value-format="yyyy-MM">
|
||
</el-date-picker>
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"
|
||
v-show="form.resource=='日'" value-format="yyyy-MM-dd"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit(form)">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="list-table">
|
||
<el-table :data="tableData" ref="table" :key="onlyKey" show-summary border
|
||
:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
|
||
style=" margin-top: 20px" height="600">
|
||
<el-table-column type="index" label="序号" width="120">
|
||
<template slot-scope="{ $index, row }">
|
||
{{$index + 1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="水表名称">
|
||
</el-table-column>
|
||
<el-table-column prop="total_water_code" label="总水量起止码">
|
||
</el-table-column>
|
||
<el-table-column prop="total_water" label="总用水量">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script type="text/javascript">
|
||
let init = function () {
|
||
|
||
}
|
||
function add0(m) {
|
||
return m < 10 ? "0" + m : m;
|
||
}
|
||
//年月日级格式_/
|
||
function formattime(shijianchuo) {
|
||
//shijianchuo是整数，否则要parseInt转换
|
||
var time = new Date(shijianchuo);
|
||
var y = time.getFullYear();
|
||
var m = time.getMonth() + 1;
|
||
var d = time.getDate();
|
||
var h = time.getHours();
|
||
var mm = time.getMinutes();
|
||
var s = time.getSeconds();
|
||
return y + "-" + add0(m) + "-" + add0(d);
|
||
}
|
||
function formattimeMoth(shijianchuo) {
|
||
//shijianchuo是整数，否则要parseInt转换
|
||
var time = new Date(shijianchuo);
|
||
var y = time.getFullYear();
|
||
var m = time.getMonth() + 1;
|
||
return y + "-" + add0(m)
|
||
}
|
||
function formattimeYear(shijianchuo) {
|
||
//shijianchuo是整数，否则要parseInt转换
|
||
var time = new Date(shijianchuo);
|
||
var y = time.getFullYear();
|
||
|
||
return y
|
||
}
|
||
var app = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
form: {
|
||
name: '',
|
||
date1: formattime(new Date().getTime()),
|
||
year: '',
|
||
month: '',
|
||
week: '',
|
||
start: '',
|
||
end: '',
|
||
type: "",
|
||
resource: '日',
|
||
},
|
||
tableData: [],
|
||
position: 0,
|
||
rowSpanArr: [],
|
||
onlyKey: '',
|
||
targetSum: 0,
|
||
indexData: [],
|
||
},
|
||
mounted() {
|
||
var newTime = formattime(new Date().getTime())
|
||
this.getTableData(this.form.resource, newTime, '', this.form.name)
|
||
|
||
},
|
||
methods: {
|
||
getRealIndex(index, row) {
|
||
// 在这里可以自定义序号的生成逻辑
|
||
// 考虑合并单元格的情况
|
||
// 返回实际的序号值
|
||
// 假设有一个字段 mergedRows 记录需要合并的行的索引
|
||
// 你的实际合并行索引数组
|
||
// 如果当前行的索引在合并行的索引数组中，则返回一个空字符串
|
||
if (app.indexData.includes(index)) {
|
||
return '';
|
||
}
|
||
//计算实际的序号值
|
||
return index - app.indexData.filter((mergedRow) => mergedRow < index).length + 1;
|
||
},
|
||
|
||
getSummaries(param) {
|
||
const { columns, data } = param;
|
||
const sums = [];
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
sums[index] = '合计';
|
||
return;
|
||
}
|
||
const values = data.map(item => Number(item[column.property]));
|
||
if (!values.every(value => isNaN(value))) {
|
||
sums[index] = values.reduce((prev, curr) => {
|
||
const value = Number(curr);
|
||
if (!isNaN(value)) {
|
||
return prev + curr;
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0);
|
||
sums[index];
|
||
}
|
||
|
||
});
|
||
let formattedData = sums.map(item => {
|
||
if (typeof item === 'number') {
|
||
return item.toFixed(2);
|
||
}
|
||
return item;
|
||
});
|
||
return formattedData;
|
||
},
|
||
handleChange(val) {
|
||
this.form.date1 = ''
|
||
this.form.year = ''
|
||
this.form.month = ''
|
||
this.form.week = ''
|
||
this.form.start = ''
|
||
this.form.end = ''
|
||
if (val == '月') {
|
||
this.form.month = formattime(new Date().getTime())
|
||
} else if (val == '日') {
|
||
this.form.date1 = formattime(new Date())
|
||
}
|
||
},
|
||
cc() {
|
||
let weekOfday = moment(this.form.week).format("E");
|
||
let Monday = moment(this.form.week).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||
let Sunday = moment(this.form.week)
|
||
.add(6 - weekOfday, "days")
|
||
.format("YYYY-MM-DD"); //周日日期
|
||
this.form.start = Monday
|
||
this.form.end = Sunday
|
||
},
|
||
// changeWeek(val) {
|
||
// let weekOfday = moment(val).format("E");
|
||
// let Monday = moment(val).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||
// let Sunday = moment(val)
|
||
// .add(7 - weekOfday, "days")
|
||
// .format("YYYY-MM-DD"); //周日日期
|
||
// console.log(Monday, Sunday);
|
||
// this.form.start= Monday
|
||
// this.form.end = Sunday
|
||
// },
|
||
getTableData(type, startdate, enddate, name) {
|
||
//var electricity_data = [];
|
||
if (type == '日') {
|
||
var data = {
|
||
type: type,
|
||
start_date: startdate,
|
||
name: name,
|
||
month: '',
|
||
}
|
||
|
||
} else if (type == '月') {
|
||
var data = {
|
||
type: type,
|
||
start_date: "",
|
||
name: name,
|
||
month: startdate,
|
||
}
|
||
}
|
||
|
||
axios({
|
||
method: "POST",
|
||
url: "http://172.16.1.253:8084/Vue/Water.aspx/getElectricityList",
|
||
data: JSON.stringify(data),
|
||
headers: {
|
||
"Content-Type": "application/json; charset=utf-8",
|
||
},
|
||
}).then(function (res) {
|
||
app.tableData = res.data.d
|
||
})
|
||
|
||
},
|
||
onSubmit(form) {
|
||
if (form.resource == '月') {
|
||
if (form.month != '') {
|
||
var newTime = formattimeMoth(form.month)
|
||
this.getTableData(form.resource, newTime, "", form.name)
|
||
} else {
|
||
var newTime = formattimeMoth(new Date().getTime())
|
||
this.getTableData(form.resource, newTime, "", form.name)
|
||
}
|
||
} else if (form.resource == '日') {
|
||
if (form.date1 != '') {
|
||
var newTime = formattime(form.date1)
|
||
this.getTableData(form.resource, newTime, '', form.name)
|
||
} else {
|
||
var newTime = formattime(new Date().getTime())
|
||
this.getTableData(this.form.resource, newTime, '', this.form.name)
|
||
}
|
||
|
||
}
|
||
},
|
||
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
if (columnIndex === 0) {
|
||
if (rowIndex % 2 === 0) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1
|
||
};
|
||
} else {
|
||
return {
|
||
rowspan: 0,
|
||
colspan: 0
|
||
};
|
||
}
|
||
}
|
||
if (columnIndex === 1) {
|
||
// const _row = this.spanArr[rowIndex]; //合并行的行数，1代表独占一行，比1大代表合并若干行，0代表不显示
|
||
// const _col = _row>0 ? 1 : 0; //行如果存在那么列就存在，行不存在那么列也就不存在
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
if (rowIndex % 2 === 0) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1
|
||
};
|
||
} else {
|
||
return {
|
||
rowspan: 0,
|
||
colspan: 0
|
||
};
|
||
}
|
||
}
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |