670 lines
27 KiB
HTML
670 lines
27 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;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- <div > -->
|
||
|
||
<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 label="周">周</el-radio>
|
||
<el-radio label="日">日</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-date-picker v-model="form.year" v-show="form.resource=='年'" type="year" placeholder="选择年"
|
||
value-format="yyyy">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="form.month" v-show="form.resource=='月'" type="month" placeholder="选择月"
|
||
value-format="yyyy-MM">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="form.week" v-show="form.resource=='周'" type="week" format="yyyy 第 WW 周"
|
||
placeholder="选择周" @input="cc">
|
||
</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" :span-method="objectSpanMethod"
|
||
:summary-method="getSummaries" show-summary border style="width: 100%; margin-top: 20px" height="600">
|
||
<!-- <el-table-column fixed width="50" label="序号" prop="newIndex">
|
||
</el-table-column> -->
|
||
<el-table-column type="index" label="序号" width="50" fixed>
|
||
<template slot-scope="{ $index, row }">
|
||
{{ getRealIndex($index) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" width="180" fixed label="电表名称">
|
||
</el-table-column>
|
||
<el-table-column prop="type" width="180" fixed label="类型">
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="id"
|
||
label="ID"
|
||
|
||
width="180">
|
||
</el-table-column> -->
|
||
|
||
<el-table-column prop="total_electricity_code" label="总电量起止码" width="150">
|
||
</el-table-column>
|
||
<el-table-column prop="total_electricity_meter" label="总电量表计读数" width="150">
|
||
</el-table-column>
|
||
<el-table-column prop="total_electricity" label="总用电量（kW·h）" width="150">
|
||
</el-table-column>
|
||
<el-table-column prop="pointed_electricity_code" label="尖电量起止码" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="pointed_electricity_meter" label="尖电量表计读数" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="pointed_electricity" label="尖用电量（kW·h）" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="peak_electricity_code" label="峰电量起止码" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="peak_electricity_meter" label="峰电量表计读数" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="peak_electricity" label="峰用电量（kW·h）" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="flat_electricity_code" label="平电量起止码" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="flat_electricity_meter" label="平电量表计读数" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="flat_electricity" label="平用电量（kW·h）" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="valley_electricity_code" label="谷电量起止码" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="valley_electricity_meter" label="谷电量表计读数" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="valley_electricity" label="谷用电量（kW·h）" width="180">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="transformer_magn" label="电流互感器倍率" width="150">
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="voltage_transformer" label="电压互感器倍率" width="150">
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</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: [
|
||
// {
|
||
// name: '宿舍楼',
|
||
// total_electricity_code: '53.88/53.91',
|
||
// total_electricity_meter: '0.03',
|
||
// total_electricity: '60',
|
||
// pointed_electricity_code: '3.07/3.07',
|
||
// pointed_electricity_meter: '0',
|
||
// pointed_electricity: '0',
|
||
// peak_electricity_code: '13.61/13.61',
|
||
// peak_electricity_meter: "4.24",
|
||
// peak_electricity: "8480",
|
||
// flat_electricity_code: '13.96/19.48',
|
||
// flat_electricity_meter: '5.62',
|
||
// flat_electricity: '11240',
|
||
// valley_electricity_code: '11.91/17.44',
|
||
// valley_electricity_meter: '5.53',
|
||
// valley_electricity: '11060',
|
||
// transformer_magn: '2000',
|
||
// voltage_transformer: '2000',
|
||
// type: '正向有功'
|
||
// },
|
||
],
|
||
position: 0,
|
||
rowSpanArr: [],
|
||
onlyKey: '',
|
||
targetSum: 0,
|
||
indexData: [],
|
||
},
|
||
mounted() {
|
||
// this.objectSpanMethod()
|
||
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 (index == 5 || index == 8 || index == 11 || index == 14 || index == 17) {
|
||
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];
|
||
}
|
||
} else {
|
||
|
||
}
|
||
});
|
||
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.week = new Date().getTime()
|
||
this.cc()
|
||
// this.form.week = formattime(new Date().getTime())
|
||
} else if (val == '月') {
|
||
this.form.month = formattime(new Date().getTime())
|
||
} else if (val == '日') {
|
||
this.form.date1 = formattime(new Date())
|
||
} else if (val == '年') {
|
||
this.form.year = formattime(new Date().getTime())
|
||
}
|
||
},
|
||
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 == '周' || type == '日') {
|
||
var data = {
|
||
type: type,
|
||
start_date: startdate,
|
||
name: name,
|
||
year: "",
|
||
month: "",
|
||
end_date: enddate
|
||
}
|
||
|
||
} else if (type == '年') {
|
||
var data = {
|
||
type: type,
|
||
start_date: "",
|
||
name: name,
|
||
year: startdate,
|
||
month: "",
|
||
end_date: ""
|
||
}
|
||
} else if (type == '月') {
|
||
var data = {
|
||
type: type,
|
||
start_date: "",
|
||
name: name,
|
||
year: "",
|
||
month: startdate,
|
||
end_date: ""
|
||
}
|
||
}
|
||
|
||
axios({
|
||
method: "POST",
|
||
url: "http://172.16.1.253:8084/Vue/RealTimeElectricity.aspx/getElectricityList",
|
||
data: JSON.stringify(data),
|
||
headers: {
|
||
"Content-Type": "application/json; charset=utf-8",
|
||
},
|
||
}).then(function (res) {
|
||
app.tableData = res.data.d
|
||
app.rowSpanArr = [];
|
||
app.onlyKey = Math.random()
|
||
app.tableData.forEach((item, index) => {
|
||
if (index == 0) {
|
||
app.rowSpanArr.push(1);
|
||
app.position = 0;
|
||
} else {
|
||
if (app.tableData[index].name == app.tableData[index - 1].name) {
|
||
app.rowSpanArr[app.position] += 1; //项目名称相同，合并到同一个数组中
|
||
app.rowSpanArr.push(0);
|
||
app.tableData[index].name = app.tableData[index - 1].name;
|
||
} else {
|
||
app.rowSpanArr.push(1);
|
||
app.position = index;
|
||
}
|
||
}
|
||
});
|
||
// app.tableData = app.tableData.map((obj, index) => {
|
||
// return { ...obj, newIndex: index + 1 };
|
||
// });
|
||
app.targetSum = app.tableData.length;
|
||
app.indexData = [];
|
||
for (let i = 1; i <= app.targetSum; i += 2) {
|
||
app.indexData.push(i);
|
||
}
|
||
})
|
||
|
||
},
|
||
onSubmit(form) {
|
||
if (form.resource == '周') {
|
||
|
||
|
||
if (form.start != '') {
|
||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||
} else {
|
||
|
||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||
// var newTime = formattimeMoth(new Date().getTime())
|
||
// this.getTableData(form.resource,newTime,"",form.name)
|
||
}
|
||
} else 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.year != '') {
|
||
var newTime = formattimeYear(form.year)
|
||
this.getTableData(form.resource, newTime, "", form.name)
|
||
} else {
|
||
var newTime = formattimeYear(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
|
||
};
|
||
}
|
||
}
|
||
//想对每行的哪几列进行比较就写哪些列
|
||
// if(columnIndex === 2){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 3){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 4){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 5){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 6){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 7){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 8){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
// if(columnIndex === 9){
|
||
// const _row = this.spanArr[rowIndex];
|
||
// const _col = _row>0 ? 1 : 0;
|
||
// return {
|
||
// rowspan: _row,
|
||
// colspan: _col
|
||
// }
|
||
// }
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
},
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |