天气

src/api/energySources/energySources.js

@@ -70,4 +70,13 @@ export const getInstrumentRunStatus = (query) => {
     method: "get",
     params: query,
   });
-};
+};
+// 
+export const getInstrumentRunDetail = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getInstrumentRunDetail",
+    method: "get",
+    params: query,
+  });
+};
+

src/api/energySourcesProvince/energySourcesProvince.js

@@ -27,15 +27,23 @@ export const getTotalCarbonEmissions = (query) => {
   });
 };
 
-// 
+// 企业能源消耗
+export const getEnterprisePower = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getEnterprisePower",
+    method: "get",
+    params: query,
+  });
+};
+
+//查询天气
 export const getWeather = () => {
   return request({
-    url: "/weathers/weather/v1",
+    url: "/weathers/v7/weather/now",
     method: "get",
     params: {
-      district_id: 431024,
+      location: 101250503,
-      data_type: 'all',
+      key: "da5448d7e24e42659c86656047911980",
-      ak: '7sBQjQEAEO5Cu4v9Fhclgs4ah3kgBuXA'
     },
   });
 };

src/views/energySources/component/dmodal.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="equipmentLoadmodal">
+    <el-dialog title="收货地址" :visible.sync="visible" class="my-info-dialog" @close="onClose">
+      <tit :title="'监测明细'" style="width: 78%">
+        <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">
+            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+          <img src="../../../../public/img/energySources/close.png" alt="" srcset="" style="width: 12px; height: 12px;"
+            @click="onClose">
+        </div>
+      </tit>
+      <div class="emodal">
+        <el-table :data="tableData" style="width: 100%; margin-top: 0.14rem;" height="90%" :stripe="true" :size="mini"
+          :row-class-name="tableRowClassName">
+          <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column prop="address" label="用电量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.loadRate }}%</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>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+export default {
+  data() {
+    return {
+      tableData: [],
+      options: [],
+      value: ''
+    };
+  },
+  components: {
+    tit
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+  },
+  created() {
+    this.getTableData()
+    this.getData()
+  },
+  methods: {
+    getTableData() {
+      getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
+        this.options = res.data.data
+      })
+    },
+    getData() {
+      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
+        this.tableData = res.data.data
+      })
+    },
+    onClose(){
+      this.$emit('onvisible', false)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        if (row.loadRate > 0) {
+          return 'trEven colorFB5E2D';
+        } else {
+          return 'trEven';
+        }
+
+      } else {
+        if (row.loadRate > 0) {
+          return 'trOdd colorFB5E2D';
+        } else {
+          return 'trOdd';
+        }
+      }
+    }
+  },
+};
+</script>
+<style>
+.my-info-dialog .el-dialog {
+  background: transparent !important;
+  box-shadow: 0 !important;
+  border: 0 !important;
+}
+
+.my-info-dialog .el-dialog__header {
+  display: none !important;
+}
+
+.my-info-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.equipmentLoadmodal /deep/ .el-table,
+.equipmentLoadmodal /deep/ .el-table__expanded-cell {
+  background-color: transparent;
+  border: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table th,
+.equipmentLoadmodal /deep/ .el-table tr,
+.equipmentLoadmodal /deep/ .el-table td {
+  background-color: transparent !important;
+  border: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table td span {
+  font-size: 0.14rem !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table::before {
+  height: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .trOdd td {
+  color: #fff;
+}
+
+.equipmentLoadmodal /deep/ .trEven td {
+  color: #fff;
+  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
+}
+
+.equipmentLoadmodal /deep/.colorFB5E2D td {
+  color: #FB5E2D !important;
+}
+
+
+.equipmentLoadmodal /deep/ .el-input__inner {
+  background: transparent !important;
+  color: #fff !important;
+  border-radius: 0;
+  border-color: rgba($color: #fff, $alpha: 0.2) !important;
+  height: 0.24rem !important;
+}
+
+.equipmentLoadmodal /deep/ .el-input__icon {
+  line-height: 0.24rem !important;
+}
+
+.emodal {
+
+  width: 8.38rem;
+  height: 6.14rem;
+
+  background: url("../../../../public/img/energySources/modals.png");
+
+  box-sizing: border-box;
+  background-size: 100% 100%;
+  margin-right: 0.22rem;
+  padding: 0.54rem 0.22rem 0 0.22rem;
+  position: relative;
+
+
+
+}
+
+.tit-r {
+  font-size: 0.14rem;
+
+  color: rgba($color: #fff, $alpha: 0.4);
+  margin-top: 0.04rem;
+}
+</style>

src/views/energySources/component/emodal.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="equipmentLoadmodal">
+    <el-dialog title="收货地址" :visible.sync="visible" class="my-info-dialog" @close="onClose">
+      <tit :title="'监测明细'" style="width: 78%">
+        <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">
+            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+          <img src="../../../../public/img/energySources/close.png" alt="" srcset="" style="width: 12px; height: 12px;"
+            @click="onClose">
+        </div>
+      </tit>
+      <div class="emodal">
+        <el-table :data="tableData" style="width: 100%; margin-top: 0.14rem;" height="90%" :stripe="true" :size="mini"
+          :row-class-name="tableRowClassName">
+          <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column prop="address" label="负载率">
+            <template slot-scope="scope">
+              <span>{{ scope.row.loadRate }}%</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>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+export default {
+  data() {
+    return {
+      tableData: [],
+      options: [],
+      value: ''
+    };
+  },
+  components: {
+    tit
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+  },
+  created() {
+    this.getTableData()
+    this.getData()
+  },
+  methods: {
+    getTableData() {
+      getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
+        this.options = res.data.data
+      })
+    },
+    getData() {
+      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
+        this.tableData = res.data.data
+      })
+    },
+    onClose(){
+      this.$emit('onvisible', false)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        if (row.loadRate > 0) {
+          return 'trEven colorFB5E2D';
+        } else {
+          return 'trEven';
+        }
+
+      } else {
+        if (row.loadRate > 0) {
+          return 'trOdd colorFB5E2D';
+        } else {
+          return 'trOdd';
+        }
+      }
+    }
+  },
+};
+</script>
+<style>
+.my-info-dialog .el-dialog {
+  background: transparent !important;
+  box-shadow: 0 !important;
+  border: 0 !important;
+}
+
+.my-info-dialog .el-dialog__header {
+  display: none !important;
+}
+
+.my-info-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.equipmentLoadmodal /deep/ .el-table,
+.equipmentLoadmodal /deep/ .el-table__expanded-cell {
+  background-color: transparent;
+  border: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table th,
+.equipmentLoadmodal /deep/ .el-table tr,
+.equipmentLoadmodal /deep/ .el-table td {
+  background-color: transparent !important;
+  border: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table td span {
+  font-size: 0.14rem !important;
+}
+
+.equipmentLoadmodal /deep/ .el-table::before {
+  height: 0 !important;
+}
+
+.equipmentLoadmodal /deep/ .trOdd td {
+  color: #fff;
+}
+
+.equipmentLoadmodal /deep/ .trEven td {
+  color: #fff;
+  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
+}
+
+.equipmentLoadmodal /deep/.colorFB5E2D td {
+  color: #FB5E2D !important;
+}
+
+
+.equipmentLoadmodal /deep/ .el-input__inner {
+  background: transparent !important;
+  color: #fff !important;
+  border-radius: 0;
+  border-color: rgba($color: #fff, $alpha: 0.2) !important;
+  height: 0.24rem !important;
+}
+
+.equipmentLoadmodal /deep/ .el-input__icon {
+  line-height: 0.24rem !important;
+}
+
+.emodal {
+
+  width: 8.38rem;
+  height: 6.14rem;
+
+  background: url("../../../../public/img/energySources/modals.png");
+
+  box-sizing: border-box;
+  background-size: 100% 100%;
+  margin-right: 0.22rem;
+  padding: 0.54rem 0.22rem 0 0.22rem;
+  position: relative;
+
+
+
+}
+
+.tit-r {
+  font-size: 0.14rem;
+
+  color: rgba($color: #fff, $alpha: 0.4);
+  margin-top: 0.04rem;
+}
+</style>

src/views/energySources/component/equipmentLoad.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="equipmentLoad box">
     <tit :title="'设备负载监控'">
-      <div class="tit-r">监测明细</div>
+      <div class="tit-r" @click="visible=true">监测明细</div>
     </tit>
     <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
       :row-class-name="tableRowClassName">
@@ -15,21 +15,25 @@
       <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
       </el-table-column>
     </el-table>
+    <emodal :visible.sync="visible" @onvisible="v => visible = v" />
   </div>
 </template>
 
 <script>
 import tit from "./tit.vue";
+import emodal from "./emodal.vue";
 import { mapGetters } from "vuex";
 import {getInstrumentActLoad} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      tableData: []
+      tableData: [],
+      visible: false
     };
   },
   components: {
-    tit
+    tit,
+    emodal
   },
   computed:{
     ...mapGetters(["userInfo", "permission"]),

src/views/energySources/index.vue

@@ -5,7 +5,7 @@
       <all />
       <div class="box-two">
         <load />
-        <dosage />
+        <dosage /> 
       </div>
       <div class="box-two">
       <equipmentLoad />