对接大屏接口

src/api/energySources/energySources.js

@@ -0,0 +1,36 @@
+import request from "@/router/axios";
+
+// 总量分析
+export const getTotalElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getTotalElectricity",
+    method: "get",
+    params: query,
+  });
+};
+
+// 连续两个月对比
+export const getMonthElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getMonthElectricity",
+    method: "get",
+    params: query,
+  });
+};
+
+// 负荷分析-日分析
+export const getDayElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getDayElectricity",
+    method: "get",
+    params: query,
+  });
+};
+
+export const getWeekElectricity = (query) => {
+  return request({
+    url: "/api/blade-lims/largeScreen/getWeekElectricity",
+    method: "get",
+    params: query,
+  });
+};

src/views/energySources/component/all.vue

@@ -10,8 +10,8 @@
       </template>
       <div class="tit-r">
         <span style="color: #fff;">选择月份：</span>
-        <el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月"
+        <el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth"
-          style="width: 1.2rem;margin-right: 0.26rem;">
+          style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM">
         </el-date-picker>
         单位：kw·h
       </div>
@@ -21,7 +21,7 @@
         <div class="card">
           <div class="card-tit">{{ $moment().format('YYYY') }}年</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in num" :key="index">
+            <div class="card-num-item" v-for="(item, index) in yearNum" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #CADEFF;">
@@ -35,7 +35,7 @@
         <div class="card">
           <div class="card-tit">{{ $moment().format('M') }}月</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in num" :key="index">
+            <div class="card-num-item" v-for="(item, index) in monthNum" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #00FFC6;">
@@ -49,7 +49,7 @@
         <div class="card">
           <div class="card-tit">昨日</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in num" :key="index">
+            <div class="card-num-item" v-for="(item, index) in yesterdayNum" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #E0B42F;">
@@ -63,7 +63,7 @@
         <div class="card">
           <div class="card-tit">今日</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in num" :key="index">
+            <div class="card-num-item" v-for="(item, index) in todayNum" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #00FFFC;">
@@ -83,28 +83,70 @@
 
 <script>
 import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import {getTotalElectricity,getMonthElectricity} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      num: 0
+      num: 0,
+      yearNum:0,
+      monthNum:0,
+      yesterdayNum:0,
+      todayNum:0,
+      selectMonth:'',
+      currentMonthData:[120, 200, 150, 80, 70, 110, 130],
+      lastMonthData:[150, 120, 180, 60, 40, 130, 150]
     };
   },
   components: {
     tit
   },
   created() {
+    this.selectMonth = this.$moment().format('YYYY-MM')
     this.$nextTick(() => {
-      this.echartsInit()
+      this.getTotal()
+      this.getTrend()
     })
-    let nums = 1223.45;
+    // let nums = 1223.45;
-    this.num = nums.toString().split('')
+    // this.num = nums.toString().split('')
+  },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
   },
-
   methods: {
+    getTotal(){
+      getTotalElectricity({manufacturerBrand:this.userInfo.dept_name}).then(res =>{
+        let data = res.data.data
+        this.yearNum = data.currentYear.toString().split('')
+        this.monthNum = data.currentMonth.toString().split('')
+        this.yesterdayNum = data.yesterday.toString().split('')
+        this.todayNum = data.today.toString().split('')
+      })
+    },
+    getTrend(){
+      this.currentMonthData = [];
+      this.lastMonthData = []
+      getMonthElectricity({manufacturerBrand:this.userInfo.dept_name,currentMonth:this.selectMonth}).then(res =>{
+        let currData = res.data.data.currentMonth
+        let lastData = res.data.data.lastMonth
+        Object.keys(currData).forEach((key) => {
+          this.currentMonthData.push(currData[key])
+        });
+        Object.keys(lastData).forEach((key) => {
+          this.lastMonthData.push(lastData[key])
+        });
+        this.$nextTick(() =>{
+          this.echartsInit()
+        })
+      })
+    },
+    changeMonth(){
+      this.getTrend()
+    },
     echartsInit() {
       const chartDom = document.getElementById('mainAll');
       const myChart = this.$echarts.init(chartDom);
-      const currentMonthDays = this.$moment().daysInMonth()
+      const currentMonthDays = this.$moment(this.selectMonth).daysInMonth()
       const xdata = Array(currentMonthDays).fill().map((_, i) => i + 1)
       const option = {
         // title: {
@@ -116,16 +158,16 @@ export default {
           bottom: "0",
           containLabel: true,
         },
-        // legend: {
+        legend: {
-        //   data: ['委托', '监督', '仲裁', '门诊'],
+          data: ['本月', '上月'],
           // right: 0,
-        //   top: 12,
+          top: 12,
-        //   textStyle: {
+          textStyle: {
-        //     color: "#fff"
+            color: "#fff"
-        //   },
+          },
-        //   itemWidth: 10,
+          itemWidth: 10,
-        //   itemHeight: 4,
+          itemHeight: 4,
-        // },
+        },
         xAxis: {
           type: "category",
           data: xdata,
@@ -178,10 +220,11 @@ export default {
         },
         series: [
           {
-            name: "委托",
+            name: "本月",
             type: "bar",
             barWidth: "10",
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: this.currentMonthData,
+            // data: [120, 200, 150, 80, 70, 110, 130],
             itemStyle: {
               normal: {
                 color: "#0084FF",
@@ -197,6 +240,27 @@ export default {
               },
             },
           },
+          {
+            name: "上月",
+            type: "bar",
+            barWidth: "10",
+            data: this.lastMonthData,
+            // data: [120, 200, 150, 80, 70, 110, 130],
+            itemStyle: {
+              normal: {
+                color: "#10efbd",
+                // label: {
+                //   show: true,
+                //   position: "top",
+                //   textStyle: {
+                //     //数值样式
+                //     color: "#0084FF",
+                //     fontSize: 14,
+                //   },
+                // },
+              },
+            },
+          },
         ],
       }
       myChart.setOption(option);

src/views/energySources/component/header.vue

@@ -3,7 +3,7 @@
 
     <div class="box">
       <div>
-        {{ $moment().format('HH:mm:ss') }}
+        {{ time }}
       </div>
       <div>
         {{ $moment().format('yyyy/MM/DD') }}
@@ -27,10 +27,13 @@
 export default {
   data() {
     return {
+      time:''
     };
   },
   created() {
-
+    setInterval(() =>{
+      this.time = this.$moment().format('HH:mm:ss')
+    },1000)
   },
   methods: {}
 };

src/views/energySources/component/load.vue

@@ -3,8 +3,8 @@
     <tit :title="'设备负载监控'">
       <div class="tit-r">
         <span style="color: #fff;">选择月份：</span>
-        <el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月" :prefix-icon="null"
+        <el-date-picker size="mini" v-model="selectDate" type="date" placeholder="选择月" :prefix-icon="null"
-          style="width: 1.2rem;margin-right: 0.26rem;">
+          style="width: 1.3rem;margin-right: 0.26rem;" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
         </el-date-picker>
         单位：kw·h
       </div>
@@ -21,21 +21,42 @@
 
 <script>
 import tit from "./tit.vue";
+import { mapGetters } from "vuex";
+import {getDayElectricity,getWeekElectricity} from "@/api/energySources/energySources"
 export default {
   data() {
     return {
-      radio: 3
+      radio: 3,
+      selectDate:'',
     };
   },
   components: {
     tit
   },
   created() {
+    this.selectDate = this.$moment().format('YYYY-MM-DD')
     this.$nextTick(() => {
+      this.getDayData()
+      this.getWeekData()
       this.echartsInit()
     })
   },
+  computed:{
+    ...mapGetters(["userInfo", "permission"]),
+  },
   methods: {
+    // 获取日分析
+    getDayData(){
+      getDayElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
+        console.log('res ======>',res)
+      })
+    },
+    // 获取月分析
+    getWeekData(){
+      getWeekElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
+        console.log('res1 ====>',res)
+      })
+    },
     echartsInit() {
       const chartDom = document.getElementById('mainLoad');
       const myChart = this.$echarts.init(chartDom);

src/views/energySources/component/tit.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-
 export default {
   data() {
     return {
@@ -38,6 +37,7 @@ export default {
   position: absolute;
   top: 0.14rem;
   left: 0.6rem;
+  z-index: 10;
   box-sizing: border-box;
   // margin: 0.14rem 0 0 0.38rem;
   width: calc(100% - 0.6rem - 0.22rem);