|
@@ -41,215 +41,223 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getLeakRate } from '@/api/yizhuan/scada'
|
|
|
- import {
|
|
|
- queryScadaDataweHistory,
|
|
|
-} from '@/api/yizhuan/scada'
|
|
|
+import { getLeakRate } from '@/api/yizhuan/scada'
|
|
|
+import { queryScadaDataweHistory } from '@/api/yizhuan/scada'
|
|
|
import moment from 'moment'
|
|
|
-
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- waterElecData: {
|
|
|
- type: Array
|
|
|
- },
|
|
|
- lastWaterElecData: {
|
|
|
- type: Array
|
|
|
- },
|
|
|
- dmy: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- belongToCollege: {
|
|
|
- type: String
|
|
|
- },
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ waterElecData: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ lastWaterElecData: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ dmy: {
|
|
|
+ type: String
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nowValue: 0,
|
|
|
- yesterdayValue: 0,
|
|
|
- pecent: null,
|
|
|
- nowWords: '昨日',
|
|
|
- yesWords: '前日',
|
|
|
- nWords: '昨日',
|
|
|
- huanbi: '环比',
|
|
|
- leakage: null,
|
|
|
- yesterdayLeakRate: 0,
|
|
|
- monthLeakRate: 0,
|
|
|
- yearLeakRate: 0,
|
|
|
- nowDay: '',
|
|
|
- nowDayStart: '',
|
|
|
- yesterday: '',
|
|
|
- yesterdayStart: '',
|
|
|
- nowDayLastYear: '',
|
|
|
- nowDayStartLastYear: '',
|
|
|
- yesterdayLastYear: '',
|
|
|
- yesterdayStartLastYear: '',
|
|
|
- nowMonthStart: '', //这月开始
|
|
|
- lastMonth: '',
|
|
|
- lastMonthStart: '',
|
|
|
- nowMonthStartLastYear: '', //去年这月开始
|
|
|
- lastMonthLastYear: '',
|
|
|
- lastMonthStartLastYear: '', //
|
|
|
- nowYearStart: '',
|
|
|
- lastYear: '',
|
|
|
- lastYearStart: '',
|
|
|
+ belongToCollege: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nowValue: 0,
|
|
|
+ yesterdayValue: 0,
|
|
|
+ pecent: null,
|
|
|
+ nowWords: '昨日',
|
|
|
+ yesWords: '前日',
|
|
|
+ nWords: '昨日',
|
|
|
+ huanbi: '环比',
|
|
|
+ leakage: null,
|
|
|
+ yesterdayLeakRate: 0,
|
|
|
+ monthLeakRate: 0,
|
|
|
+ yearLeakRate: 0,
|
|
|
+ nowDay: '',
|
|
|
+ nowDayStart: '',
|
|
|
+ yesterday: '',
|
|
|
+ yesterdayStart: '',
|
|
|
+ nowDayLastYear: '',
|
|
|
+ nowDayStartLastYear: '',
|
|
|
+ yesterdayLastYear: '',
|
|
|
+ yesterdayStartLastYear: '',
|
|
|
+ nowMonthStart: '', //这月开始
|
|
|
+ lastMonth: '',
|
|
|
+ lastMonthStart: '',
|
|
|
+ nowMonthStartLastYear: '', //去年这月开始
|
|
|
+ lastMonthLastYear: '',
|
|
|
+ lastMonthStartLastYear: '', //
|
|
|
+ nowYearStart: '',
|
|
|
+ lastYear: '',
|
|
|
+ lastYearStart: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ belongToCollege: {
|
|
|
+ handler(n, o) {
|
|
|
+ this.getLeakRate()
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- waterElecData: {
|
|
|
- handler(n, o) {
|
|
|
- if(this.dmy!='0'){
|
|
|
- this.handleData()
|
|
|
- }else{
|
|
|
- this.getsearch()
|
|
|
- }
|
|
|
-
|
|
|
- // console.log(this.now);
|
|
|
- }
|
|
|
- },
|
|
|
- lastWaterElecData: {
|
|
|
- handler(n, o) {
|
|
|
- if(this.dmy!='0'){
|
|
|
- this.handleData()
|
|
|
- }else{
|
|
|
- this.getsearch()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- dmy: {
|
|
|
- handler(n, o) {
|
|
|
- if (n == '1') {
|
|
|
- this.leakage = this.monthLeakRate
|
|
|
- this.nowValue = 0
|
|
|
- this.yestaryValue = 0
|
|
|
- this.nowWords = '当月'
|
|
|
- this.yesWords = '上月'
|
|
|
- this.nWords = '本月'
|
|
|
- this.huanbi = '环比'
|
|
|
- this.handleData()
|
|
|
-
|
|
|
- } else if (n == '2') {
|
|
|
- this.leakage = this.yearLeakRate
|
|
|
- this.nowValue = 0
|
|
|
- this.yestaryValue = 0
|
|
|
- this.nowWords = '当年'
|
|
|
- this.yesWords = '去年'
|
|
|
- this.nWords = '本年'
|
|
|
- this.huanbi = '同比'
|
|
|
- this.handleData()
|
|
|
-
|
|
|
- } else if (n == '0') {
|
|
|
- this.leakage = this.yesterdayLeakRate
|
|
|
- this.nowValue = 0
|
|
|
- this.yestaryValue = 0
|
|
|
- this.nowWords = '昨日'
|
|
|
- this.yesWords = '前日'
|
|
|
- this.nWords = '昨日'
|
|
|
- this.huanbi = '环比'
|
|
|
- // this.handleData()
|
|
|
- this.getsearch()
|
|
|
- }
|
|
|
+ waterElecData: {
|
|
|
+ handler(n, o) {
|
|
|
+ if (this.dmy != '0') {
|
|
|
+ this.handleData()
|
|
|
+ } else {
|
|
|
+ this.getsearch()
|
|
|
}
|
|
|
+
|
|
|
+ // console.log(this.now);
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getDate()
|
|
|
- // this.handleData()
|
|
|
- this.getLeakRate()
|
|
|
- this.getsearch()
|
|
|
-
|
|
|
- },
|
|
|
- computed: {
|
|
|
-
|
|
|
- handleclc() {
|
|
|
- if (this.nowValue && this.yesterdayValue) {
|
|
|
- this.pecent = Math.round(((Number(this.nowValue) - Number(this.yesterdayValue)) / Number(this.yesterdayValue)) * 100)
|
|
|
- return Math.abs(this.pecent)
|
|
|
- }
|
|
|
- },
|
|
|
- handleArrow() {
|
|
|
- if (this.pecent > 0) {
|
|
|
- return '↑'
|
|
|
+ lastWaterElecData: {
|
|
|
+ handler(n, o) {
|
|
|
+ if (this.dmy != '0') {
|
|
|
+ this.handleData()
|
|
|
} else {
|
|
|
- return '↓'
|
|
|
+ this.getsearch()
|
|
|
}
|
|
|
- },
|
|
|
- handleWrods() {
|
|
|
- if (this.pecent > 0) {
|
|
|
- return '上升'
|
|
|
- } else {
|
|
|
- return '下降'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dmy: {
|
|
|
+ handler(n, o) {
|
|
|
+ if (n == '1') {
|
|
|
+ this.leakage = this.monthLeakRate
|
|
|
+ this.nowValue = 0
|
|
|
+ this.yestaryValue = 0
|
|
|
+ this.nowWords = '当月'
|
|
|
+ this.yesWords = '上月'
|
|
|
+ this.nWords = '本月'
|
|
|
+ this.huanbi = '环比'
|
|
|
+ this.handleData()
|
|
|
+ } else if (n == '2') {
|
|
|
+ this.leakage = this.yearLeakRate
|
|
|
+ this.nowValue = 0
|
|
|
+ this.yestaryValue = 0
|
|
|
+ this.nowWords = '当年'
|
|
|
+ this.yesWords = '去年'
|
|
|
+ this.nWords = '本年'
|
|
|
+ this.huanbi = '同比'
|
|
|
+ this.handleData()
|
|
|
+ } else if (n == '0') {
|
|
|
+ this.leakage = this.yesterdayLeakRate
|
|
|
+ this.nowValue = 0
|
|
|
+ this.yestaryValue = 0
|
|
|
+ this.nowWords = '昨日'
|
|
|
+ this.yesWords = '前日'
|
|
|
+ this.nWords = '昨日'
|
|
|
+ this.huanbi = '环比'
|
|
|
+ // this.handleData()
|
|
|
+ this.getsearch()
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getDate()
|
|
|
+ // this.handleData()
|
|
|
+ this.getLeakRate()
|
|
|
+ this.getsearch()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ handleclc() {
|
|
|
+ if (this.nowValue && this.yesterdayValue) {
|
|
|
+ this.pecent = Math.round(
|
|
|
+ ((Number(this.nowValue) - Number(this.yesterdayValue)) / Number(this.yesterdayValue)) * 100
|
|
|
+ )
|
|
|
+ return Math.abs(this.pecent)
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- getsearch(){
|
|
|
- queryScadaDataweHistory({
|
|
|
- belongToCollege: this.belongToCollege,
|
|
|
- statisticsType: 1, //统计类型:0小时统计 1天统计 2月统计 3年统计
|
|
|
- start: this.nowDayStart,
|
|
|
- // 当前时间
|
|
|
- end: this.nowDay,
|
|
|
- // 水是2,电是7
|
|
|
- allIndexType: '2',
|
|
|
- // 不传name查分表,传'总表'查总表
|
|
|
- name: '总表'
|
|
|
- }).then((r) => {
|
|
|
- if (r.code == 1) {
|
|
|
- // console.log(r,33)
|
|
|
- let sum=0
|
|
|
- r.result.forEach(e => {
|
|
|
- sum+=Number(e.diff)*1000
|
|
|
- });
|
|
|
- this.nowValue=sum/1000
|
|
|
- }
|
|
|
- })
|
|
|
- queryScadaDataweHistory({
|
|
|
- belongToCollege: this.belongToCollege,
|
|
|
- statisticsType: 1, //统计类型:0小时统计 1天统计 2月统计 3年统计
|
|
|
- start: this.yesterdayStart,
|
|
|
- // 当前时间
|
|
|
- end: this.yesterday,
|
|
|
- // 水是2,电是7
|
|
|
- allIndexType: '2',
|
|
|
- // 不传name查分表,传'总表'查总表
|
|
|
- name: '总表'
|
|
|
- }).then((r) => {
|
|
|
- if (r.code == 1) {
|
|
|
- let sum=0
|
|
|
- r.result.forEach(e => {
|
|
|
- sum+=Number(e.diff)*1000
|
|
|
- });
|
|
|
- this.yesterdayValue=sum/1000
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getLeakRate() {
|
|
|
- getLeakRate().then((res) => {
|
|
|
- if (res.code == 1) {
|
|
|
- this.yesterdayLeakRate = res.result.yesterdayLeakRate
|
|
|
- this.monthLeakRate = res.result.monthLeakRate
|
|
|
- this.yearLeakRate = res.result.yearLeakRate
|
|
|
- this.leakage = res.result.yesterdayLeakRate
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleData() {
|
|
|
- if (this.waterElecData.length > 0) {
|
|
|
- this.waterElecData.forEach((i) => {
|
|
|
- if (i.type == '0') {
|
|
|
- this.nowValue = i.nowSum
|
|
|
- }
|
|
|
+ handleArrow() {
|
|
|
+ if (this.pecent > 0) {
|
|
|
+ return '↑'
|
|
|
+ } else {
|
|
|
+ return '↓'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleWrods() {
|
|
|
+ if (this.pecent > 0) {
|
|
|
+ return '上升'
|
|
|
+ } else {
|
|
|
+ return '下降'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getsearch() {
|
|
|
+ queryScadaDataweHistory({
|
|
|
+ belongToCollege: this.belongToCollege,
|
|
|
+ statisticsType: 1, //统计类型:0小时统计 1天统计 2月统计 3年统计
|
|
|
+ start: this.nowDayStart,
|
|
|
+ // 当前时间
|
|
|
+ end: this.nowDay,
|
|
|
+ // 水是2,电是7
|
|
|
+ allIndexType: '2',
|
|
|
+ // 不传name查分表,传'总表'查总表
|
|
|
+ name: '总表'
|
|
|
+ }).then((r) => {
|
|
|
+ if (r.code == 1) {
|
|
|
+ // console.log(r,33)
|
|
|
+ let sum = 0
|
|
|
+ r.result.forEach((e) => {
|
|
|
+ sum += Number(e.diff) * 1000
|
|
|
})
|
|
|
+ this.nowValue = sum / 1000
|
|
|
}
|
|
|
- if (this.lastWaterElecData.length > 0) {
|
|
|
- this.lastWaterElecData.forEach((i) => {
|
|
|
- if (i.type == '0') {
|
|
|
- this.yesterdayValue = i.nowSum
|
|
|
- }
|
|
|
+ })
|
|
|
+ queryScadaDataweHistory({
|
|
|
+ belongToCollege: this.belongToCollege,
|
|
|
+ statisticsType: 1, //统计类型:0小时统计 1天统计 2月统计 3年统计
|
|
|
+ start: this.yesterdayStart,
|
|
|
+ // 当前时间
|
|
|
+ end: this.yesterday,
|
|
|
+ // 水是2,电是7
|
|
|
+ allIndexType: '2',
|
|
|
+ // 不传name查分表,传'总表'查总表
|
|
|
+ name: '总表'
|
|
|
+ }).then((r) => {
|
|
|
+ if (r.code == 1) {
|
|
|
+ let sum = 0
|
|
|
+ r.result.forEach((e) => {
|
|
|
+ sum += Number(e.diff) * 1000
|
|
|
})
|
|
|
+ this.yesterdayValue = sum / 1000
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLeakRate() {
|
|
|
+ getLeakRate({schoolName:this.belongToCollege=='0'?'南校区':'北校区'}).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.yesterdayLeakRate = res.result.yesterdayLeakRate
|
|
|
+ this.monthLeakRate = res.result.monthLeakRate
|
|
|
+ this.yearLeakRate = res.result.yearLeakRate
|
|
|
+ this.leakage = res.result.yesterdayLeakRate
|
|
|
+ if (this.dmy == '1') {
|
|
|
+ this.leakage = this.monthLeakRate
|
|
|
+ } else if (this.dmy == '2') {
|
|
|
+ this.leakage = this.yearLeakRate
|
|
|
+ } else if (this.dmy == '0') {
|
|
|
+ this.leakage = this.yesterdayLeakRate
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- // 获取时间
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ if (this.waterElecData.length > 0) {
|
|
|
+ this.waterElecData.forEach((i) => {
|
|
|
+ if (i.type == '0') {
|
|
|
+ this.nowValue = i.nowSum
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.lastWaterElecData.length > 0) {
|
|
|
+ this.lastWaterElecData.forEach((i) => {
|
|
|
+ if (i.type == '0') {
|
|
|
+ this.yesterdayValue = i.nowSum
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取时间
|
|
|
getDate() {
|
|
|
this.nowDay = moment()
|
|
|
.subtract(1, 'days')
|
|
@@ -339,110 +347,74 @@ import moment from 'moment'
|
|
|
.valueOf()
|
|
|
// console.log(moment().year(moment().year() - 1).endOf('year').format('YYYY-MM-DD HH:mm:ss').valueOf());
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .data-box {
|
|
|
+.data-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .box-top {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- .box-top {
|
|
|
- width: 100%;
|
|
|
- height: 56%;
|
|
|
- .el-col {
|
|
|
- height: 100%;
|
|
|
- &:first-child {
|
|
|
- padding-right: 6.5px;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- padding: 0 3.5px;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- padding-left: 6.5px;
|
|
|
- }
|
|
|
- > div {
|
|
|
- height: 100%;
|
|
|
- background-color: #f4f9fd;
|
|
|
- border-radius: 4px;
|
|
|
- div {
|
|
|
- &:first-child {
|
|
|
- font-family: 'Source_Han_Sans_CN';
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- color: #0073c4;
|
|
|
- height: 30%;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: #0073c4;
|
|
|
- height: 40%;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: #222222;
|
|
|
- height: 30%;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 56%;
|
|
|
+ .el-col {
|
|
|
+ height: 100%;
|
|
|
+ &:first-child {
|
|
|
+ padding-right: 6.5px;
|
|
|
}
|
|
|
- }
|
|
|
- .box-bottom {
|
|
|
- width: 100%;
|
|
|
- height: calc(44% - 10px);
|
|
|
- margin-top: 10px;
|
|
|
- background-color: #f8fbfd;
|
|
|
- border-radius: 4px;
|
|
|
- .el-col {
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding: 0 3.5px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ padding-left: 6.5px;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
height: 100%;
|
|
|
- &.col-left {
|
|
|
- div {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
+ background-color: #f4f9fd;
|
|
|
+ border-radius: 4px;
|
|
|
+ div {
|
|
|
+ &:first-child {
|
|
|
+ font-family: 'Source_Han_Sans_CN';
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #0073c4;
|
|
|
+ height: 30%;
|
|
|
+ line-height: 48px;
|
|
|
}
|
|
|
- }
|
|
|
- &.col-middle {
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- div {
|
|
|
- height: 50%;
|
|
|
- text-align: left;
|
|
|
- line-height: 200%;
|
|
|
- span {
|
|
|
- vertical-align: middle;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- &:first-child span {
|
|
|
- font-family: 'Source_Han_Sans_CN';
|
|
|
- font-size: 16px;
|
|
|
- text-align: center;
|
|
|
- color: #0073c4;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #0073c4;
|
|
|
+ height: 40%;
|
|
|
+ line-height: 48px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #222222;
|
|
|
+ height: 30%;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
- &.col-right {
|
|
|
- text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(44% - 10px);
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #f8fbfd;
|
|
|
+ border-radius: 4px;
|
|
|
+ .el-col {
|
|
|
+ height: 100%;
|
|
|
+ &.col-left {
|
|
|
+ div {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
- span {
|
|
|
- font-family: 'Source_Han_Sans_CN';
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- vertical-align: middle;
|
|
|
- color: #0073c4;
|
|
|
+ img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
@@ -450,6 +422,42 @@ import moment from 'moment'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.col-middle {
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ div {
|
|
|
+ height: 50%;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 200%;
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ &:first-child span {
|
|
|
+ font-family: 'Source_Han_Sans_CN';
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #0073c4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.col-right {
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ font-family: 'Source_Han_Sans_CN';
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #0073c4;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|