415 lines
17 KiB
HTML
415 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.13.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.13.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__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::-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);
|
||
}
|
||
|
||
.demo-form-inline {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.el-pagination {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.my-dialog .el-dialog__wrapper .el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
|
||
.el-descriptions__header {
|
||
justify-content: center
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 15px 20px;
|
||
}
|
||
|
||
.el-dialog__header {
|
||
padding: 10px 20px 10px;
|
||
}
|
||
|
||
.el-descriptions-item__label:not(.is-bordered-label) {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.el-descriptions-item__container {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-descriptions__title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.electricityDetails .el-descriptions-item__label:not(.is-bordered-label){
|
||
font-size: 15px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="content" id="app">
|
||
<div>
|
||
<el-form :inline="true" :model="formInfo" class="demo-form-inline">
|
||
<el-form-item label="账单类型:">
|
||
<el-select v-model="formInfo.billType" placeholder="选择账单类型" clearable
|
||
>
|
||
<el-option :label="item.label" :value="item.value" v-for="(item,index) in billOptions"
|
||
:key="index"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="表名称:">
|
||
<el-input v-model="formInfo.tableName" placeholder="请输入表名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="时间:">
|
||
<el-radio-group v-model="formInfo.time" @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="formInfo.year" v-show="formInfo.time=='年'" type="year" placeholder="选择年"
|
||
value-format="yyyy" key="year">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="formInfo.month" v-show="formInfo.time=='月'" type="month" placeholder="选择月"
|
||
value-format="yyyy-MM" key="month">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
<!-- <el-button type="primary" @click="onSubmit">重置</el-button> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="list-table">
|
||
<el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
|
||
style="width: 100%; margin-top: 20px" max-height="600" min-height="500" height="800"
|
||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||
:cell-style="{textAlign:'center'}">
|
||
<el-table-column type="index" width="180" label="序号">
|
||
</el-table-column>
|
||
<el-table-column prop="bill_type" label="账单类型">
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="表名称">
|
||
</el-table-column>
|
||
<el-table-column prop="bill_month" label="账单月份">
|
||
</el-table-column>
|
||
<el-table-column prop="total_usage" label="总用量（kW·h）">
|
||
</el-table-column>
|
||
<el-table-column prop="total_price" label="总费用（元）">
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="billingDetails(scope.row)">账单详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-pagination background layout="total,sizes,prev, pager, next, jumper" :page-sizes="[5, 10, 15, 20]"
|
||
:page-size="pagesize" :total="tableData.length" @current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange">
|
||
</el-pagination>
|
||
<el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false"
|
||
custom-class="my-dialog" width="60%">
|
||
<!-- 电弹窗-->
|
||
<el-descriptions :title="childTitle" :column="3" v-show="electricityShow">
|
||
<el-descriptions-item label="用电时间">{{childFrom.electricity_time}}</el-descriptions-item>
|
||
<el-descriptions-item label="总电量">{{childFrom.total_usage}}</el-descriptions-item>
|
||
<el-descriptions-item label="总电费">{{childFrom.total_price}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions direction="vertical" :colon="false" v-show="electricityShow"
|
||
class="electricityDetails">
|
||
<el-descriptions-item label="电费详情">
|
||
<el-table :data="childFrom.data" style="width: 100%"
|
||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||
:cell-style="{textAlign:'center'}">
|
||
<el-table-column prop="type_name" label="示数类型">
|
||
</el-table-column>
|
||
<el-table-column prop="last_month_reading" label="电表上次读数">
|
||
</el-table-column>
|
||
<el-table-column prop="this_month_reading" label="电表本次读数">
|
||
</el-table-column>
|
||
<el-table-column prop="transformer_magn" label="电流倍率">
|
||
</el-table-column>
|
||
<el-table-column prop="voltage_transformer" label="电压倍率">
|
||
</el-table-column>
|
||
<el-table-column prop="measure" label="表计电量">
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="电度用电价格">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<!-- 水弹窗-->
|
||
<el-descriptions :title="childTitle" :column="3" v-show="!electricityShow">
|
||
<el-descriptions-item label="账单时间">{{childFrom.electricity_time}}</el-descriptions-item>
|
||
<el-descriptions-item label="总水量">{{childFrom.total_usage}}</el-descriptions-item>
|
||
<el-descriptions-item label="总水费">{{childFrom.total_price}}</el-descriptions-item>
|
||
<el-descriptions-item label="当月水量">{{waterVolume}}</el-descriptions-item>
|
||
<el-descriptions-item label="水价" :span="4">{{price}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions direction="vertical" :colon="false" v-show="!electricityShow">
|
||
<el-descriptions-item label="水费详情">
|
||
<el-table :data="childFrom.data" style="width: 100%"
|
||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||
:cell-style="{textAlign:'center'}">
|
||
<el-table-column prop="type_name" label="水表名称">
|
||
</el-table-column>
|
||
<el-table-column prop="last_month_reading" label="上月水码">
|
||
</el-table-column>
|
||
<el-table-column prop="this_month_reading" label="本月水码">
|
||
</el-table-column>
|
||
<el-table-column prop="measure" label="当月水量(吨)">
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="当月水费">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var app = new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
|
||
formInfo: {
|
||
tableName: '', //用户名
|
||
billType: '', //账单类型
|
||
year: moment().format('YYYY'), //年单选
|
||
month: '', //月单选
|
||
time: '年'
|
||
},
|
||
childFrom: {}, //弹窗数据
|
||
waterVolume:'', //当月水量
|
||
price:'', //水价
|
||
childTitle: '',
|
||
//账单选项
|
||
billOptions: [{
|
||
value: '电',
|
||
label: '电'
|
||
}, {
|
||
value: '水',
|
||
label: '水'
|
||
}],
|
||
tableData: [], //表格数据
|
||
//分页
|
||
pagesize: 10,
|
||
currentPage: 1,
|
||
//详情弹窗
|
||
dialogTableVisible: false,
|
||
//公安弹窗
|
||
electricityShow: true,
|
||
//接口地址
|
||
apiURL: 'http://172.16.1.253:8084/',
|
||
}
|
||
},
|
||
mounted() {
|
||
this.onSubmit()
|
||
},
|
||
|
||
methods: {
|
||
//类型清空事件
|
||
// setValueNull(){
|
||
// this.onSubmit()
|
||
// },
|
||
//单选年/月
|
||
handleChange() {
|
||
|
||
},
|
||
//查询
|
||
onSubmit() {
|
||
let dataList = {
|
||
bill_type: '',
|
||
type: '',
|
||
name: '',
|
||
date: ''
|
||
}
|
||
if (this.formInfo.time == '年') {
|
||
dataList.bill_type = this.formInfo.billType
|
||
dataList.type = this.formInfo.time
|
||
dataList.name = this.formInfo.tableName
|
||
dataList.date = this.formInfo.year
|
||
} else {
|
||
dataList.bill_type = this.formInfo.billType
|
||
dataList.type = this.formInfo.time
|
||
dataList.name = this.formInfo.tableName
|
||
dataList.date = this.formInfo.month
|
||
}
|
||
axios({
|
||
method: "POST",
|
||
url: this.apiURL + "Vue/Bill.aspx/getBillList",
|
||
data: dataList,
|
||
headers: {
|
||
"Content-Type": "application/json; charset=utf-8",
|
||
},
|
||
}).then((res) => {
|
||
this.tableData = res.data.d
|
||
})
|
||
},
|
||
//分页
|
||
handleCurrentChange(cpage) {
|
||
this.currentPage = cpage;
|
||
},
|
||
handleSizeChange(psize) {
|
||
this.pagesize = psize;
|
||
},
|
||
//打开账单详情弹窗
|
||
billingDetails(row) {
|
||
console.log(row,'wwwwwwwwwwwwwww');
|
||
this.dialogTableVisible = true
|
||
this.electricityShow = row.bill_type == '电' ? true : false
|
||
this.childFrom = row
|
||
this.childTitle = row.bill_type == '电' ? this.childTitle = row.bill_month + '电费账单' : this.childTitle = row.bill_month + '水费账单'
|
||
// waterVolume:'', //当月水量
|
||
// price:'', //水价
|
||
this.waterVolume = this.childFrom.data[0].measure
|
||
this.price = this.childFrom.data[0].price
|
||
}
|
||
|
||
},
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |