对接大屏接口

src/api/energySources/energySources.js

@@ -27,6 +27,7 @@ export const getDayElectricity = (query) => {
   });
 };
 
+// 负荷分析-周分析
 export const getWeekElectricity = (query) => {
   return request({
     url: "/api/blade-lims/largeScreen/getWeekElectricity",
@@ -34,3 +35,21 @@ export const getWeekElectricity = (query) => {
     params: query,
   });
 };
+
+// 用量分析-每日
+export const getPeriodElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getPeriodElectricity",
+    method: "get",
+    params: query,
+  });
+};
+
+// 设备负载率
+export const getInstrumentActLoad = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getInstrumentActLoad",
+    method: "get",
+    params: query,
+  });
+};

src/views/energySources/component/dosage.vue

@@ -5,8 +5,8 @@
         <span style="color: #0096FF;">监测明细</span>
         &nbsp;&nbsp;&nbsp;
         <span style="color: #fff;">选择月份：</span>
-        <el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月"
+        <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
-          style="width: 1.2rem;margin-right: 0.26rem;">
+          style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
         </el-date-picker>
         单位：kw·h
       </div>
@@ -16,9 +16,9 @@
 
       <el-table :data="tableData" style="width: 62%;" height="92%" :stripe="true" :size="mini"
         :row-class-name="tableRowClassName">
-        <el-table-column prop="name" label="部门/车间">
+        <el-table-column prop="name" label="部门/车间" show-overflow-tooltip>
           <template slot-scope="scope">
-            <span style="color: #fff">{{ scope.row.name }}%</span>
+            <span style="color: #fff">{{ scope.row.name }}</span>
 
           </template>
         </el-table-column>
@@ -26,14 +26,14 @@
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#11F150' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
-            <span style="color: #11F150">{{ scope.row.address }}%</span>
+            <span style="color: #11F150">{{ scope.row.sum ? scope.row.sum : 0 }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="address" label="尖时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
-            <span style="color: #FB5E2D">{{ scope.row.address }}%</span>
+            <span style="color: #FB5E2D">{{ scope.row.jian ? scope.row.jian : 0 }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="date" label="峰时段">
@@ -41,21 +41,21 @@
             <!-- <span :style="{ color: scope.row.address > 0 ? '#FBB02D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address
           }}%</span> -->
-            <span style="color: #FBB02D">{{ scope.row.address }}%</span>
+            <span style="color: #FBB02D">{{ scope.row.feng ? scope.row.feng : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="address" label="峰时段">
+        <el-table-column prop="address" label="平时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
-            <span style="color: #00A2FF">{{ scope.row.address }}%</span>
+            <span style="color: #00A2FF">{{ scope.row.ping ? scope.row.ping : 0 }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="address" label="谷时段">
           <template slot-scope="scope">
             <!-- <span :style="{ color: scope.row.address > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
             scope.row.address }}%</span> -->
-            <span style="color: #10EFBD">{{ scope.row.address }}%</span>
+            <span style="color: #10EFBD">{{ scope.row.gu ? scope.row.gu : 0 }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -85,49 +85,38 @@
 
 <script>
 import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import {getPeriodElectricity} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      tableData: [{
+      selectDay:'',
-        date: '2016-05-02',
+      tableData: []
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: 0,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: 29,
-      }]
     };
   },
   components: {
     tit
   },
   created() {
+    this.selectDay = this.$moment().format('YYYY-MM-DD')
     this.$nextTick(() => {
+      this.getPeriodData()
       this.echartsInit()
     })
   },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
+  },
   methods: {
+    getPeriodData(){
+      getPeriodElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDay}).then(res =>{
+        console.log('period =====>',res)
+        this.tableData = res.data.data
+      })
+    },
+    changeDate(){
+      this.getPeriodData()
+    },
     echartsInit() {
       const chartDom = document.getElementById('mainDosage');
       const myChart = this.$echarts.init(chartDom);

src/views/energySources/component/equipmentLoad.vue

@@ -5,14 +5,14 @@
     </tit>
     <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
       :row-class-name="tableRowClassName">
-      <el-table-column prop="name" label="设备名称">
+      <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.address }}%</span>
+          <span>{{ scope.row.loadRate }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="date" label="负载最长时段">
+      <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
       </el-table-column>
     </el-table>
   </div>
@@ -20,57 +20,39 @@
 
 <script>
 import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import {getInstrumentActLoad} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      tableData: [{
+      tableData: []
-        date: '2016-05-02',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: 0,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: 29,
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: 29,
-      }]
     };
   },
   components: {
     tit
   },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
+  },
   created() {
-
+    this.getTableData()
   },
   methods: {
+    getTableData(){
+      getInstrumentActLoad({manufacturerBrand:this.userInfo.dept_name}).then(res =>{
+        this.tableData = res.data.data
+      })
+    },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
-        if (row.address > 0) {
+        if (row.loadRate > 0) {
           return 'trEven colorFB5E2D';
         } else {
           return 'trEven';
         }
 
       } else {
-        if (row.address > 0) {
+        if (row.loadRate > 0) {
           return 'trOdd colorFB5E2D';
         } else {
           return 'trOdd';