弹窗

2 years ago · f3db2d5b2e
parent 25ebdefb48
commit f3db2d5b2e
4 changed files with 137 additions and 33 deletions
--- a/src/views/energySources/component/dmodal.vue
+++ b/src/views/energySources/component/dmodal.vue
@ -5,7 +5,7 @@
        <div class="tit-r">
          <span style="color: #fff;">选择设备：</span>
          <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>
          </el-select>
@ -18,15 +18,15 @@
          :row-class-name="tableRowClassName">
          <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
          </el-table-column>
-          <el-table-column prop="address" label="用电量">
+          <el-table-column prop="singleElectricity" label="用电量">
            <template slot-scope="scope">
-              <span>{{ scope.row.loadRate }}%</span>
+              <span>{{ scope.row.singleElectricity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
          </el-table-column>
        </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>
      </div>

@ -37,13 +37,16 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+import { getPeriodElectricity, getInstrumentRunDetail } from "@/api/energySources/energySources"
 export default {
  data() {
    return {
      tableData: [],
      options: [],
-      value: ''
+      value: '',
+      total: 0,
+      current: 1,
+      size: 10
    };
  },
  components: {
@ -53,6 +56,17 @@ export default {
    visible: {
      type: Boolean,
      default: false
+    },
+    selectDay: {
+      type: String
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.getData()
+        this.getTableData()
+      }
    }
  },
  computed: {
@ -60,33 +74,55 @@ export default {
  },
  created() {
    this.getTableData()
-    this.getData()
+    // this.getData()
  },
  methods: {
    getTableData() {
-      getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
+      getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
        this.options = res.data.data
+        // this.value = this.options[0].name
      })
    },
    getData() {
-      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
-        this.tableData = res.data.data
+      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay, name: this.value }).then(res => {
+        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)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (row.loadRate > 0) {
-          return 'trEven colorFB5E2D';
+          return 'trEven';
        } else {
          return 'trEven';
        }

      } else {
        if (row.loadRate > 0) {
-          return 'trOdd colorFB5E2D';
+          return 'trOdd';
        } else {
          return 'trOdd';
        }
@ -98,7 +134,7 @@ export default {
 <style>
 .my-info-dialog .el-dialog {
  background: transparent !important;
-  box-shadow: 0 !important;
+  box-shadow: none !important;
  border: 0 !important;
 }

@ -143,7 +179,7 @@ export default {
 }

 .equipmentLoadmodal /deep/.colorFB5E2D td {
-  color: #FB5E2D !important;
+  // color: #FB5E2D !important;
 }


@ -159,6 +195,20 @@ export default {
  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 {

  width: 8.38rem;
--- a/src/views/energySources/component/dosage.vue
+++ b/src/views/energySources/component/dosage.vue
@ -2,7 +2,7 @@
  <div class="box dosage">
    <tit :title="'用量分析'">
      <div class="tit-r">
-        <span style="color: #0096FF;">监测明细</span>
+        <span style="color: #0096FF;" @click="visible=true">监测明细</span>
        &nbsp;&nbsp;&nbsp;
        <span style="color: #fff;">选择月份：</span>
        <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
@ -80,22 +80,27 @@
      </div> -->
      <!-- <div id="mainDosage"></div> -->
    </div>
+    
+    <dmodal :visible.sync="visible" @onvisible="v => visible = v" :selectDay="selectDay"/>
  </div>
 </template>

 <script>
 import tit from "./tit.vue";
+import dmodal from "./dmodal.vue";
 import { mapGetters } from "vuex";
 import { getPeriodElectricity } from "@/api/energySources/energySources"
 export default {
  data() {
    return {
      selectDay: '',
-      tableData: []
+      tableData: [],
+      visible: false
    };
  },
  components: {
-    tit
+    tit,
+    dmodal
  },
  created() {
    this.selectDay = this.$moment().format('YYYY-MM-DD')
--- a/src/views/energySources/component/emodal.vue
+++ b/src/views/energySources/component/emodal.vue
@ -5,7 +5,7 @@
        <div class="tit-r">
          <span style="color: #fff;">选择设备：</span>
          <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>
          </el-select>
@ -26,7 +26,8 @@
          <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
          </el-table-column>
        </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>
      </div>

@ -37,13 +38,16 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+import { getInstrumentActLoad, getInstrumentRunDetail } from "@/api/energySources/energySources"
 export default {
  data() {
    return {
      tableData: [],
      options: [],
-      value: ''
+      value: '',
+      total: 0,
+      current: 1,
+      size: 10
    };
  },
  components: {
@ -55,38 +59,60 @@ export default {
      default: false
    }
  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.getData()
+      }
+    }
+  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  created() {
    this.getTableData()
-    this.getData()
  },
  methods: {
    getTableData() {
      getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
        this.options = res.data.data
+        // this.value = this.options[0].name
+
      })
    },
    getData() {
-      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
-        this.tableData = res.data.data
+      getInstrumentRunDetail({
+        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)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (row.loadRate > 0) {
-          return 'trEven colorFB5E2D';
+          return 'trEven';
        } else {
          return 'trEven';
        }

      } else {
        if (row.loadRate > 0) {
-          return 'trOdd colorFB5E2D';
+          return 'trOdd';
        } else {
          return 'trOdd';
        }
@ -98,7 +124,7 @@ export default {
 <style>
 .my-info-dialog .el-dialog {
  background: transparent !important;
-  box-shadow: 0 !important;
+  box-shadow: none !important;
  border: 0 !important;
 }

@ -143,7 +169,7 @@ export default {
 }

 .equipmentLoadmodal /deep/.colorFB5E2D td {
-  color: #FB5E2D !important;
+  // color: #FB5E2D !important;
 }


@ -159,6 +185,20 @@ export default {
  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 {

  width: 8.38rem;
--- a/src/views/energySources/component/equipmentStatus.vue
+++ b/src/views/energySources/component/equipmentStatus.vue
@ -15,6 +15,7 @@ import { getInstrumentRunStatus } from "@/api/energySources/energySources"
 export default {
  data() {
    return {
+      funt: null
    };
  },
  components: {
@ -22,10 +23,18 @@ export default {
  },
  created() {
    this.$nextTick(() => {
+      
      this.getData()
+      this.funt = setInterval(() => {
+        this.getData()
+      }, 3600000)
+      this.funt()
    })

  },
+  beforeDestroyed() { 
+    clearInterval(this.funt)
+  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
@ -40,8 +49,8 @@ export default {
        // this.monthNum = data.currentMonth.toString().split('')
        // this.yesterdayNum = data.yesterday.toString().split('')
        // this.todayNum = data.today.toString().split('')
-        
-      this.echartsInit(res.data.data)
+
+        this.echartsInit(res.data.data)
      })
    },
    getLongestSubArray(obj) {
@ -58,7 +67,7 @@ export default {
      return longest;
    },
    echartsInit(arr) {
-   
+
      let day8 = this.$moment().startOf('day').add(8, 'hours').valueOf();
      let day20 = this.$moment().startOf('day').add(20, 'hours').valueOf();