suojin
/
jiahe_device
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

弹窗

Browse Source
main
jn517618 2 years ago
parent 25ebdefb48
commit f3db2d5b2e
4 changed files with 137 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      src/views/energySources/component/dmodal.vue
  2. 11
      src/views/energySources/component/dosage.vue
  3. 64
      src/views/energySources/component/emodal.vue
  4. 15
      src/views/energySources/component/equipmentStatus.vue

80
src/views/energySources/component/dmodal.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="tit-r"> <div class="tit-r">
<span style="color: #fff;">选择设备：</span> <span style="color: #fff;">选择设备：</span>
<el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择" <el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择"
@change="changeMonth"> @change="change">
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
@ -18,15 +18,15 @@
:row-class-name="tableRowClassName"> :row-class-name="tableRowClassName">
<el-table-column prop="name" label="设备名称" show-overflow-tooltip> <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column prop="address" label="用电量"> <el-table-column prop="singleElectricity" label="用电量">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.loadRate }}%</span> <span>{{ scope.row.singleElectricity }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip> <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;"> <el-pagination background layout="prev, pager, next" small :total="total" style="text-align: right;" @current-change="currentChange">
</el-pagination> </el-pagination>
</div> </div>
@ -37,13 +37,16 @@
<script> <script>
import tit from "./tit.vue"; import tit from "./tit.vue";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources" import { getPeriodElectricity, getInstrumentRunDetail } from "@/api/energySources/energySources"
export default { export default {
data() { data() {
return { return {
tableData: [], tableData: [],
options: [], options: [],
value: '' value: '',
total: 0,
current: 1,
size: 10
}; };
}, },
components: { components: {
@ -53,6 +56,17 @@ export default {
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
},
selectDay: {
type: String
}
},
watch: {
visible(v) {
if (v) {
this.getData()
this.getTableData()
}
} }
}, },
computed: { computed: {
@ -60,33 +74,55 @@ export default {
}, },
created() { created() {
this.getTableData() this.getTableData()
this.getData() // this.getData()
}, },
methods: { methods: {
getTableData() { getTableData() {
getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => { getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
this.options = res.data.data this.options = res.data.data
// this.value = this.options[0].name
}) })
}, },
getData() { getData() {
getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => { getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay, name: this.value }).then(res => {
this.tableData = res.data.data console.log(res)
this.tableData = res.data.records
this.total = res.data.total
}) })
}, },
onClose(){ getData() {
getInstrumentRunDetail({
manufacturerBrand: this.userInfo.dept_name,
today: this.selectDay,
name: this.value,
current: this.current,
size: this.size
}).then(res => {
this.tableData = res.data.data.records
this.total = res.data.data.total
})
},
currentChange(v) {
this.current = v
this.getData()
},
change() {
this.getData()
},
onClose() {
this.$emit('onvisible', false) this.$emit('onvisible', false)
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
if (row.loadRate > 0) { if (row.loadRate > 0) {
return 'trEven colorFB5E2D'; return 'trEven';
} else { } else {
return 'trEven'; return 'trEven';
} }
} else { } else {
if (row.loadRate > 0) { if (row.loadRate > 0) {
return 'trOdd colorFB5E2D'; return 'trOdd';
} else { } else {
return 'trOdd'; return 'trOdd';
} }
@ -98,7 +134,7 @@ export default {
<style> <style>
.my-info-dialog .el-dialog { .my-info-dialog .el-dialog {
background: transparent !important; background: transparent !important;
box-shadow: 0 !important; box-shadow: none !important;
border: 0 !important; border: 0 !important;
} }
@ -143,7 +179,7 @@ export default {
} }
.equipmentLoadmodal /deep/.colorFB5E2D td { .equipmentLoadmodal /deep/.colorFB5E2D td {
color: #FB5E2D !important; // color: #FB5E2D !important;
} }
@ -159,6 +195,20 @@ export default {
line-height: 0.24rem !important; line-height: 0.24rem !important;
} }
.equipmentLoadmodal /deep/ .btn-prev {
background: transparent !important;
color: #fff !important;
}
.equipmentLoadmodal /deep/ .btn-next {
background: transparent !important;
color: #fff !important;
}
.equipmentLoadmodal /deep/ .el-pagination .is-background .el-pager li {
background: transparent !important;
}
.emodal { .emodal {
width: 8.38rem; width: 8.38rem;

11
src/views/energySources/component/dosage.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="box dosage"> <div class="box dosage">
<tit :title="'用量分析'"> <tit :title="'用量分析'">
<div class="tit-r"> <div class="tit-r">
<span style="color: #0096FF;">监测明细</span> <span style="color: #0096FF;" @click="visible=true">监测明细</span>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<span style="color: #fff;">选择月份：</span> <span style="color: #fff;">选择月份：</span>
<el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate" <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
@ -80,22 +80,27 @@
</div> --> </div> -->
<!-- <div id="mainDosage"></div> --> <!-- <div id="mainDosage"></div> -->
</div> </div>
<dmodal :visible.sync="visible" @onvisible="v => visible = v" :selectDay="selectDay"/>
</div> </div>
</template> </template>
<script> <script>
import tit from "./tit.vue"; import tit from "./tit.vue";
import dmodal from "./dmodal.vue";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getPeriodElectricity } from "@/api/energySources/energySources" import { getPeriodElectricity } from "@/api/energySources/energySources"
export default { export default {
data() { data() {
return { return {
selectDay: '', selectDay: '',
tableData: [] tableData: [],
visible: false
}; };
}, },
components: { components: {
tit tit,
dmodal
}, },
created() { created() {
this.selectDay = this.$moment().format('YYYY-MM-DD') this.selectDay = this.$moment().format('YYYY-MM-DD')

64
src/views/energySources/component/emodal.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="tit-r"> <div class="tit-r">
<span style="color: #fff;">选择设备：</span> <span style="color: #fff;">选择设备：</span>
<el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择" <el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择"
@change="changeMonth"> @change="change">
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
@ -26,7 +26,8 @@
<el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip> <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;"> <el-pagination background layout="prev, pager, next" small :total="total" style="text-align: right;"
@current-change="currentChange">
</el-pagination> </el-pagination>
</div> </div>
@ -37,13 +38,16 @@
<script> <script>
import tit from "./tit.vue"; import tit from "./tit.vue";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources" import { getInstrumentActLoad, getInstrumentRunDetail } from "@/api/energySources/energySources"
export default { export default {
data() { data() {
return { return {
tableData: [], tableData: [],
options: [], options: [],
value: '' value: '',
total: 0,
current: 1,
size: 10
}; };
}, },
components: { components: {
@ -55,38 +59,60 @@ export default {
default: false default: false
} }
}, },
watch: {
visible(v) {
if (v) {
this.getData()
}
}
},
computed: { computed: {
...mapGetters(["userInfo", "permission"]), ...mapGetters(["userInfo", "permission"]),
}, },
created() { created() {
this.getTableData() this.getTableData()
this.getData()
}, },
methods: { methods: {
getTableData() { getTableData() {
getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => { getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
this.options = res.data.data this.options = res.data.data
// this.value = this.options[0].name
}) })
}, },
getData() { getData() {
getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => { getInstrumentRunDetail({
this.tableData = res.data.data manufacturerBrand: this.userInfo.dept_name,
today: this.$moment().format('yyyy-MM-DD'),
name: this.value,
current: this.current,
size: this.size
}).then(res => {
this.tableData = res.data.data.records
this.total = res.data.data.total
}) })
}, },
onClose(){ currentChange(v) {
this.current = v
this.getData()
},
change(){
this.getData()
},
onClose() {
this.$emit('onvisible', false) this.$emit('onvisible', false)
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
if (row.loadRate > 0) { if (row.loadRate > 0) {
return 'trEven colorFB5E2D'; return 'trEven';
} else { } else {
return 'trEven'; return 'trEven';
} }
} else { } else {
if (row.loadRate > 0) { if (row.loadRate > 0) {
return 'trOdd colorFB5E2D'; return 'trOdd';
} else { } else {
return 'trOdd'; return 'trOdd';
} }
@ -98,7 +124,7 @@ export default {
<style> <style>
.my-info-dialog .el-dialog { .my-info-dialog .el-dialog {
background: transparent !important; background: transparent !important;
box-shadow: 0 !important; box-shadow: none !important;
border: 0 !important; border: 0 !important;
} }
@ -143,7 +169,7 @@ export default {
} }
.equipmentLoadmodal /deep/.colorFB5E2D td { .equipmentLoadmodal /deep/.colorFB5E2D td {
color: #FB5E2D !important; // color: #FB5E2D !important;
} }
@ -159,6 +185,20 @@ export default {
line-height: 0.24rem !important; line-height: 0.24rem !important;
} }
.equipmentLoadmodal /deep/ .btn-prev {
background: transparent !important;
color: #fff !important;
}
.equipmentLoadmodal /deep/ .btn-next {
background: transparent !important;
color: #fff !important;
}
.equipmentLoadmodal /deep/ .el-pagination.is-background .el-page li {
background: transparent !important;
}
.emodal { .emodal {
width: 8.38rem; width: 8.38rem;

15
src/views/energySources/component/equipmentStatus.vue
Unescape View File

@ -15,6 +15,7 @@ import { getInstrumentRunStatus } from "@/api/energySources/energySources"
export default { export default {
data() { data() {
return { return {
funt: null
}; };
}, },
components: { components: {
@ -22,10 +23,18 @@ export default {
}, },
created() { created() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData()
this.funt = setInterval(() => {
this.getData()
}, 3600000)
this.funt()
}) })
}, },
beforeDestroyed() {
clearInterval(this.funt)
},
computed: { computed: {
...mapGetters(["userInfo", "permission"]), ...mapGetters(["userInfo", "permission"]),
}, },
@ -40,8 +49,8 @@ export default {
// this.monthNum = data.currentMonth.toString().split('') // this.monthNum = data.currentMonth.toString().split('')
// this.yesterdayNum = data.yesterday.toString().split('') // this.yesterdayNum = data.yesterday.toString().split('')
// this.todayNum = data.today.toString().split('') // this.todayNum = data.today.toString().split('')
this.echartsInit(res.data.data) this.echartsInit(res.data.data)
}) })
}, },
getLongestSubArray(obj) { getLongestSubArray(obj) {
@ -58,7 +67,7 @@ export default {
return longest; return longest;
}, },
echartsInit(arr) { echartsInit(arr) {
let day8 = this.$moment().startOf('day').add(8, 'hours').valueOf(); let day8 = this.$moment().startOf('day').add(8, 'hours').valueOf();
let day20 = this.$moment().startOf('day').add(20, 'hours').valueOf(); let day20 = this.$moment().startOf('day').add(20, 'hours').valueOf();

Write Preview
Loading…
Cancel
Save