983 lines
43 KiB
HTML
983 lines
43 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%;
|
||
height: 100%;
|
||
}
|
||
</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__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: auto !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 {
|
||
overflow: auto !important;
|
||
position: relative;
|
||
height: 100% !important;
|
||
}
|
||
|
||
|
||
/* // 滚动条的滑块 */
|
||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background-color: #ddd;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.el-tag.el-tag--info {
|
||
background-color: rgb(239, 243, 246);
|
||
border-color: rgb(64, 158, 255);
|
||
color: rgb(64, 158, 255);
|
||
}
|
||
</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-select v-model="value" placeholder="请选择">
|
||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
</el-form-item> -->
|
||
|
||
<el-form-item label="名称：">
|
||
<el-input v-model="form.name" placeholder="名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="负荷名称：">
|
||
<!-- <el-input v-model="form.name"></el-input> -->
|
||
<el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
|
||
:style="{color:'rgb(64,158,255)'}">
|
||
</el-option>
|
||
</el-select>
|
||
</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-if="form.resource=='年'"
|
||
type="year"
|
||
placeholder="选择年" value-format="yyyy">
|
||
</el-date-picker> -->
|
||
<div v-show="form.resource=='年'">
|
||
<el-date-picker v-model="addForm.date_range_start" :picker-options="pickerOptionsYearStart"
|
||
value-format="yyyy" type="year" placeholder="开始时间" ref="datePicker" key="year">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="addForm.date_range_end" value-format="yyyy"
|
||
:picker-options="pickerOptionsYearEnd" type="year" placeholder="结束时间" ref="datePicker"
|
||
key="year">
|
||
</el-date-picker>
|
||
</div>
|
||
|
||
|
||
<!-- <el-date-picker v-model="form.month" type="monthrange" range-separator="~" start-placeholder="开始月份"
|
||
v-if="form.resource=='月'" end-placeholder="结束月份">
|
||
</el-date-picker> -->
|
||
<div v-show="form.resource=='月'">
|
||
<el-date-picker v-model="addForm.date_range_start" type="month" placeholder="开始日期"
|
||
:picker-options="pickerOptionsMonthStart" key="month">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="addForm.date_range_end" type="month" placeholder="结束日期"
|
||
:picker-options="pickerOptionsMonthEnd" key="month">
|
||
</el-date-picker>
|
||
</div>
|
||
<!-- <el-date-picker v-model="form.week" v-if="form.resource=='周'" type="week" format="yyyy 第 WW 周"
|
||
placeholder="选择周" @input="cc">
|
||
</el-date-picker> -->
|
||
<div v-show="form.resource=='周'">
|
||
<el-date-picker v-model="form.week" type="week" placeholder="开始日期"
|
||
:picker-options="pickerOptions0" key="week" :format="'yyyy 第 WW 周'">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="form.weekend" type="week" placeholder="结束日期"
|
||
:picker-options="pickerOptions1" key="week" :format="'yyyy 第 WW 周'">
|
||
</el-date-picker>
|
||
</div>
|
||
<div v-show="form.resource=='日'">
|
||
<el-date-picker v-model="addForm.date_range_start" type="date" placeholder="开始日期"
|
||
:picker-options="pickerOptions0" key="day">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="addForm.date_range_end" type="date" placeholder="结束日期"
|
||
:picker-options="pickerOptions1" key="day">
|
||
</el-date-picker>
|
||
</div>
|
||
<!-- <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;" v-if="form.resource=='日'" value-format="yyyy-MM-dd"></el-date-picker> -->
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="search">查询</el-button>
|
||
<!-- <el-button type="primary" icon="el-icon-refresh" @click="onSubmit(form)">重置</el-button>
|
||
<el-button type="primary" icon="el-icon-download" @click="onSubmit(form)">导出</el-button> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- <div class="list-table">
|
||
|
||
<el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%">
|
||
|
||
<template v-for="(col ,index) in cols">
|
||
<el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"></el-table-column>
|
||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
|
||
<template slot-scope="scope">
|
||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
<br>数据:{{tableData}}
|
||
|
||
</div> -->
|
||
<template>
|
||
<div style="height:90%;overflow: auto">
|
||
<el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%;"
|
||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||
:cell-style="{textAlign:'center'}">
|
||
<el-table-column type="index" label="序号" fixed="left" width="150">
|
||
</el-table-column>
|
||
<!-- <template v-for="(col ,index) in cols">
|
||
<el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label">
|
||
</el-table-column>
|
||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
|
||
<template slot-scope="scope">
|
||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</template> -->
|
||
<el-table-column prop="name" label="名称" fixed="left" width="150"></el-table-column>
|
||
<el-table-column label="负荷名称" fixed="left" width="150">
|
||
<template slot-scope="scope">
|
||
<div v-for="(item,index) in scope.row.load_name" style="margin-top: 10px">
|
||
{{item}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<template v-for="(col ,index) in cols">
|
||
<!-- <el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"> -->
|
||
<!-- </el-table-column> -->
|
||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label"
|
||
width="150">
|
||
<template slot-scope="scope">
|
||
<div v-for="(item,key) in col.list" :key="key" style="
|
||
display: flex;
|
||
flex-direction: column">
|
||
<!-- <el-tag type="primary"> -->
|
||
<!-- {{ item }} -->
|
||
<!-- </el-tag> -->
|
||
<div v-for="(i,n) in item.value" :key="n">
|
||
<div v-if="scope.row.index == key" style="
|
||
display: flex;
|
||
flex-direction: column;justify-content: space-between;margin-top:10px">
|
||
{{i}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
<el-table-column label="合计" fixed="right">
|
||
<template slot-scope="scope">
|
||
<div v-for="(item,index) in scope.row.total" style="margin-top: 10px">
|
||
{{item}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- <br>数据:{{tableData}} -->
|
||
</div>
|
||
</template>
|
||
</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: '',
|
||
yearStart: '',
|
||
yearEnd: '',
|
||
month: '',
|
||
week: '',
|
||
weekend: '',
|
||
start: '',
|
||
end: '',
|
||
type: "",
|
||
resource: '月',
|
||
},
|
||
options1: [{
|
||
value: '正向有功电量',
|
||
label: '正向有功电量'
|
||
}, {
|
||
value: '反向有功电量',
|
||
label: '反向有功电量'
|
||
}, {
|
||
value: '正向有功尖电量',
|
||
label: '正向有功尖电量'
|
||
}, {
|
||
value: '正向有功峰电量',
|
||
label: '正向有功峰电量'
|
||
}, {
|
||
value: '正向有功平电量',
|
||
label: '正向有功平电量'
|
||
}, {
|
||
value: '正向有功谷电量',
|
||
label: '正向有功谷电量'
|
||
}],
|
||
value: '',
|
||
options: [{
|
||
value: '正向有功电量',
|
||
label: '正向有功电量'
|
||
}, {
|
||
value: '反向有功电量',
|
||
label: '反向有功电量'
|
||
}, {
|
||
value: '正向有功尖电量',
|
||
label: '正向有功尖电量'
|
||
}, {
|
||
value: '正向有功峰电量',
|
||
label: '正向有功峰电量'
|
||
}, {
|
||
value: '正向有功平电量',
|
||
label: '正向有功平电量'
|
||
}, {
|
||
value: '正向有功谷电量',
|
||
label: '正向有功谷电量'
|
||
}],
|
||
value1: [],
|
||
value2: ['正向有功电量', '反向有功电量', '正向有功尖电量', '正向有功峰电量', '正向有功平电量', '正向有功谷电量'],
|
||
addForm: {
|
||
date_range_end: moment().format('YYYY') + '-' + moment().format('MM'),
|
||
date_range_start: moment().format('YYYY') + '-' + moment().format('MM'),
|
||
},
|
||
pickerOptions0: { //结束时间不能大于开始时间
|
||
disabledDate: (time) => {
|
||
if (app.addForm.date_range_end) {
|
||
return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
||
}
|
||
|
||
}
|
||
},
|
||
pickerOptions1: {
|
||
disabledDate: (time) => {
|
||
if (app.addForm.date_range_start) {
|
||
return time.getTime() < new Date(app.addForm.date_range_start).getTime() - 1 *
|
||
24 * 60 * 60 * 1000; //可以选择同一天
|
||
}
|
||
}
|
||
},
|
||
pickerOptionsYearStart: {
|
||
disabledDate: (time) => {
|
||
let fixedTime = new Date(time)
|
||
if (app.addForm.date_range_end != '') {
|
||
return fixedTime.getFullYear() > app.addForm.date_range_end
|
||
}
|
||
}
|
||
},
|
||
pickerOptionsYearEnd: {
|
||
disabledDate(time) {
|
||
let fixedTime = new Date(time)
|
||
return fixedTime.getFullYear() < app.addForm.date_range_start
|
||
}
|
||
},
|
||
pickerOptionsMonthStart: {
|
||
disabledDate(time) {
|
||
// if (!app.addForm.date_range_end) {
|
||
// return false;
|
||
// }
|
||
// return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
||
return false
|
||
}
|
||
},
|
||
pickerOptionsMonthEnd: {
|
||
disabledDate(time) {
|
||
if (!app.addForm.date_range_start) {
|
||
return false;
|
||
}
|
||
return time.getTime() < new Date(app.addForm.date_range_start).getTime();
|
||
}
|
||
},
|
||
// tableData: [
|
||
|
||
// ],
|
||
cols: [
|
||
// {
|
||
// label: "名称",
|
||
// prop: "node",
|
||
// type: "normal"
|
||
// },
|
||
// {
|
||
// label: "负荷名称",
|
||
// prop: "name",
|
||
// type: "normal"
|
||
// },
|
||
// {
|
||
// label: "2023",
|
||
// prop: "type",
|
||
// type: "sort"
|
||
// },
|
||
// {
|
||
// label: "合计",
|
||
// prop: "coordinate",
|
||
// type: "normal"
|
||
// }
|
||
],
|
||
tableData: [
|
||
// {
|
||
// node: "0051",
|
||
// name: " 机库顶",
|
||
// type: "UWB",
|
||
// status: "正常",
|
||
// coordinate: "12.21,34.45,34.6"
|
||
// },
|
||
// {
|
||
// node: "0061",
|
||
// name: "机库门",
|
||
// type: "GPS",
|
||
// status: "低电",
|
||
// coordinate: "45.41,67.45,78.6"
|
||
// }
|
||
],
|
||
position: 0,
|
||
rowSpanArr: [],
|
||
onlyKey: '',
|
||
apiURL: 'http://172.16.1.253:8084/',
|
||
searchType: '月',
|
||
},
|
||
mounted() {
|
||
// this.objectSpanMethod()
|
||
// var newTime = formattime(new Date().getTime())
|
||
// this.getTableData(this.form.resource,newTime,'',this.form.name)
|
||
this.search()
|
||
|
||
},
|
||
|
||
methods: {
|
||
search() {
|
||
if (this.value2.length > 0 && ((this.form.week != '' && this.form.weekend != '') || (this
|
||
.addForm.date_range_start != '' && this.addForm.date_range_end != ''))) {
|
||
this.tableData = [];
|
||
this.cols = [];
|
||
let dataList = {
|
||
type: '',
|
||
load_name: '',
|
||
name: '',
|
||
start_date: '',
|
||
end_date: ''
|
||
}
|
||
if (this.searchType == '周') {
|
||
dataList.type = this.searchType,
|
||
dataList.load_name = this.value2,
|
||
dataList.name = this.form.name,
|
||
dataList.start_date = moment(this.form.week).subtract(1, 'days').format(
|
||
"YYYY-MM-DD"),
|
||
dataList.end_date = moment(this.form.weekend).add(5, 'days').format(
|
||
"YYYY-MM-DD")
|
||
} else if (this.searchType == '年') {
|
||
dataList.type = this.searchType,
|
||
dataList.load_name = this.value2,
|
||
dataList.name = this.form.name,
|
||
dataList.start_date = this.addForm.date_range_start,
|
||
dataList.end_date = this.addForm.date_range_end
|
||
} else if (this.searchType == '月') {
|
||
dataList.type = this.searchType,
|
||
dataList.load_name = this.value2,
|
||
dataList.name = this.form.name,
|
||
dataList.start_date = moment(this.addForm.date_range_start).format("YYYY-MM"),
|
||
dataList.end_date = moment(this.addForm.date_range_end).format("YYYY-MM")
|
||
} else if (this.searchType == '日') {
|
||
dataList.type = this.searchType,
|
||
dataList.load_name = this.value2,
|
||
dataList.name = this.form.name,
|
||
dataList.start_date = moment(this.addForm.date_range_start).format(
|
||
"YYYY-MM-DD"),
|
||
dataList.end_date = moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
||
}
|
||
|
||
console.log(dataList, 'dataList');
|
||
axios({
|
||
method: "POST",
|
||
url: this.apiURL + "Vue/ElectricityReportForms.aspx/getElectricityList",
|
||
data: dataList,
|
||
headers: {
|
||
"Content-Type": "application/json; charset=utf-8",
|
||
},
|
||
}).then((res) => {
|
||
this.tableData = res.data.d
|
||
this.tableData = this.tableData.map((item, index) => ({
|
||
...item,
|
||
index: (index).toString()
|
||
}));
|
||
this.tableData.forEach((item, index) => {
|
||
for (let i = 0; i < item.list.length; i++) {
|
||
this.cols.push({
|
||
label: item.list[i].time,
|
||
prop: "type",
|
||
type: "sort",
|
||
value: item.list[i].values,
|
||
name: item.name,
|
||
load_name: item.load_name,
|
||
total: item.total
|
||
})
|
||
}
|
||
});
|
||
let uniqueNames = []
|
||
// this.cols = this.cols.filter(obj => {
|
||
// if (!uniqueNames.includes(obj.label)) {
|
||
// uniqueNames.push(obj.label);
|
||
// return true;
|
||
// }
|
||
// return false;
|
||
// });
|
||
this.cols = this.cols.reduce((result, item) => {
|
||
// 检查结果数组中是否已存在相同 label 的项
|
||
let existingItem = result.find((el) => el.label === item.label);
|
||
|
||
// 如果存在，将当前项的 value 和 age 添加到该项的 list 中
|
||
if (existingItem) {
|
||
existingItem.list.push({
|
||
prop: item.prop,
|
||
type: item.type,
|
||
value: item.value,
|
||
name: item.name,
|
||
load_name: item.load_name,
|
||
total: item.total
|
||
});
|
||
} else {
|
||
// 如果不存在，创建一个新的项并添加到结果数组中
|
||
result.push({
|
||
label: item.label,
|
||
prop: "type",
|
||
type: "sort",
|
||
list: [{
|
||
prop: item.prop,
|
||
type: item.type,
|
||
value: item.value,
|
||
name: item.name,
|
||
load_name: item.load_name,
|
||
total: item.total
|
||
}]
|
||
});
|
||
}
|
||
|
||
return result;
|
||
}, []);
|
||
})
|
||
} else {
|
||
this.$message.warning('请输入输入查询信息')
|
||
}
|
||
|
||
},
|
||
//获取两个年之间的所有年
|
||
getAllYears(startYear, endYear) {
|
||
const years = [];
|
||
for (let year = startYear; year <= endYear; year++) {
|
||
years.push(year);
|
||
}
|
||
return years;
|
||
},
|
||
//获取两个日期之间的所有时间段
|
||
getAllDates(startDate, endDate) {
|
||
const dates = [];
|
||
let currentDate = new Date(startDate);
|
||
let currentEndDate = new Date(endDate);
|
||
while (currentDate <= currentEndDate) {
|
||
const year = currentDate.getFullYear();
|
||
const month = currentDate.getMonth() + 1;
|
||
const date = currentDate.getDate();
|
||
const dateStr =
|
||
`${year}-${month < 10 ? '0' : ''}${month}-${date < 10 ? '0' : ''}${date}`;
|
||
dates.push(dateStr);
|
||
currentDate.setDate(currentDate.getDate() + 1);
|
||
}
|
||
return dates;
|
||
},
|
||
getdisabled(date) {
|
||
|
||
this.pickerOptions = Object.assign({}, this.pickerOptions, {
|
||
|
||
disabledDate(time) {
|
||
|
||
return time.getTime() <
|
||
date; //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()
|
||
|
||
}
|
||
|
||
})
|
||
|
||
},
|
||
handleCurrentChange(row, event, column) {
|
||
console.log(row, event, column, event.currentTarget);
|
||
},
|
||
handleEdit(index, row) {
|
||
console.log(index, row);
|
||
},
|
||
handleDelete(index, row) {
|
||
console.log(index, row);
|
||
},
|
||
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) => {
|
||
console.log("prev", prev)
|
||
console.log("curr", curr)
|
||
const value = Number(curr);
|
||
if (!isNaN(value)) {
|
||
return prev + curr;
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0);
|
||
sums[index];
|
||
}
|
||
} else {
|
||
|
||
}
|
||
});
|
||
|
||
return sums;
|
||
},
|
||
handleChange(val) {
|
||
this.addForm = {
|
||
date_range_end: '',
|
||
date_range_start: ''
|
||
}
|
||
this.searchType = 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.form.weekend = 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) {
|
||
console.log("startdate", startdate)
|
||
console.log("enddate", enddate)
|
||
//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;
|
||
}
|
||
}
|
||
});
|
||
})
|
||
|
||
},
|
||
onSubmit(form) {
|
||
console.log("form", 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> |