zhaojijng 3 роки тому
батько
коміт
f6263e2535

+ 2 - 1
src/App.vue

@@ -13,10 +13,11 @@ export default {
     },
     created() {
         this.getAirCondition();//空调数据
+        this.getLastAllEnergy();
     },
     components: {},
     methods: {
-        ...mapActions(["getAirCondition"]),
+        ...mapActions(["getAirCondition","getLastAllEnergy"]),
     },
 };
 </script>

+ 4 - 4
src/api/fistpage.ts

@@ -1,6 +1,6 @@
 export default {
-    queryConditionerStatus: "/environment/queryConditionerStatus",//空调状态
-    queryEnvHistory: "/environment/queryEnvHistory",//上月温度
-    queryEnvCurrent: "/environment/queryEnvCurrent",//实时数据
-    queryIndoorTempList: "/environment/queryIndoorTempList",//实时温度
+    queryConditionerStatus: "/daping/environment/queryConditionerStatus",//空调状态
+    queryEnvHistory: "/daping/environment/queryEnvHistory",//上月温度
+    queryEnvCurrent: "/daping/environment/queryEnvCurrent",//实时数据
+    queryIndoorTempList: "/daping/environment/queryIndoorTempList",//实时温度
 };

+ 7 - 2
src/api/second.ts

@@ -1,4 +1,9 @@
 export default {
-    queryFs: "/object/floor/queryFs", //空调状态
-    queryParam: "/object/floor/queryParam", //上月温度
+    queryFs: "/daping/object/floor/queryFs", //获取楼层
+    queryParam: "/daping/object/floor/queryParam", //获取楼层详情
+    getWeatherCurrent: "/weather/duoduo-service/object-service/weather/getCurrent", //天气
+
+    queryLastDayEnergy: "/daping/energy/week/day/query", //上月每日能耗
+    queryLastAllEnergy: "/daping/sceneValue/query", //上月所有能耗
+
 };

+ 28 - 20
src/store/index.ts

@@ -9,8 +9,8 @@ export default new Vuex.Store({
     state: {
         realTimeData: [], //实时数据
         airCondition: {}, //空调情况
-        realTimeTemp: [], //实时温度
         lastMonthData: [], //上月数据
+        lastAllEnergy: {}, //上月所有能耗数据
     },
     mutations: {
         getRealTimeData(state, data) {
@@ -20,15 +20,15 @@ export default new Vuex.Store({
         getAirCondition(state, data) {
             state.airCondition = data;
         },
-        getRealTimeTemp(state, data) {
-            state.realTimeTemp = data;
-        },
         getLastMonthData(state, data) {
             state.lastMonthData = data;
         },
+        getLastAllEnergy(state, data) {
+            state.lastAllEnergy = data;
+        },
     },
     actions: {
-        getRealTimeData({ state, commit }, payload) {
+        getRealTimeData({ state, commit }, data) {
             //实时数据
             axios
                 .get(api.queryEnvCurrent + "?projectId=Pj1101020002")
@@ -38,7 +38,7 @@ export default new Vuex.Store({
                     commit("getRealTimeData", resdata);
                 });
         },
-        getAirCondition({ state, commit }, payload) {
+        getAirCondition({ state, commit }, data) {
             //空调状态
             axios
                 .get(api.queryConditionerStatus + "?projectId=Pj1101020002")
@@ -48,28 +48,36 @@ export default new Vuex.Store({
                     commit("getAirCondition", resdata);
                 });
         },
-        getRealTimeTemp({ state, commit }, payload) {
+        getRealTimeTemp({ state, commit }, data) {
             //实时温度
-            axios
-                .post(api.queryIndoorTempList, {
-                    projectId: "Pj1101020002",
-                })
-                .then((res: any) => {
-                    // commit({
-                    //     type: "getRealTimeTemp",
-                    //     data: res,
-                    // });
-                });
+            return axios.get(
+                api.queryIndoorTempList + "?projectId=Pj1101020002"
+            );
         },
-        getLastMonthData({ state, commit }, payload) {
-            //上月温度
+        getLastMonthData({ state, commit }, data) {
+            //上月数据
             axios
                 .get(api.queryEnvHistory + "?projectId=Pj1101020002")
                 .then((res: any) => {
-                    debugger;
+                    //debugger;
                     var resdata = res.data.data || [];
                     commit("getLastMonthData", resdata);
                 });
         },
+        getLastAllEnergy({ state, commit }, data) {
+            //上月所有能耗数据
+            axios
+                .post(api.queryLastAllEnergy, {
+                    criteria: {
+                        projectId: "Pj1101080259",
+                    },
+                })
+                .then((res: any) => {
+                   // debugger;
+                    console.log("getLastAllEnergy", res);
+                    var resdata = res.data.content[0] || {};
+                    commit("getLastAllEnergy", resdata);
+                });
+        },
     },
 });

+ 1 - 1
src/utils/axios.ts

@@ -3,7 +3,7 @@ import axios from "axios";
 // axios默认配置
 axios.defaults.headers.post["Content-Type"] = "application/json,charset=utf-8";
 axios.defaults.timeout = 1000 * 60 * 60 * 24;
-axios.defaults.baseURL = "/daping";// /daping/duoduo-service/object-service
+axios.defaults.baseURL = "";// /daping/duoduo-service/object-service   /daping
 
 //添加请求拦截器
 axios.interceptors.request.use(

+ 48 - 27
src/views/horizontalScreen.vue

@@ -1,13 +1,16 @@
 <template>
     <div class="horizontalScreen">
         <div class="bg">
-            <img :src="bgImg">
+            <img :src="bgImg" />
         </div>
         <div class="container">
             <div class="hor-head">
                 <pageHead />
             </div>
-            <div class="hor-nowData-content firstScreen flexBetween">
+            <div
+                class="hor-nowData-content firstScreen flexBetween"
+                style="display:none"
+            >
                 <div class="content-left">
                     <NowData screenType="hor" />
                     <div class="content-left-cont flexBetween">
@@ -17,7 +20,6 @@
                         <div class="bottom-right">
                             <TemChart screenType="hor" />
                         </div>
-
                     </div>
                 </div>
                 <div class="content-right">
@@ -38,11 +40,14 @@
                             <div class="left-text">
                                 <div class="left-content-first">比基准能耗</div>
                                 <div class="left-content-next">
-                                    节能<span class="next-num">50%</span>
+                                    节能<span class="next-num"
+                                        >{{ lastAllEnergy.energyCompare }}%</span
+                                    >
+                                </div>
+                                <div class="left-content-first blue">
+                                    总能耗{{ lastAllEnergy.energyTotal }}KWh
                                 </div>
-                                <div class="left-content-first blue">总能耗28050KWh</div>
                             </div>
-
                         </div>
                     </div>
                     <div class="right ">
@@ -53,34 +58,53 @@
                     <lastEnergyChart screenType="hor" />
                 </div>
             </div>
-            <div class="hor-nowData-content">
+            <div class="hor-nowData-content" style="display:none">
                 <horFloorSpace />
             </div>
         </div>
-
     </div>
 </template>
 <script>
-import hor_big_bg from '@/assets/horImg/hor_big_bg.png';
-import pageHead from './valueDelivery/pageHead.vue'
-import NowData from './valueDelivery/NowData.vue'
-import LastMonth from './valueDelivery/LastMonthData.vue'
-import HorAirSwitch from './valueDelivery/HorAirSwitch.vue'
-import lastSaveEnergy from './valueDelivery/lastSaveEnergy.vue'
-import TemChart from './valueDelivery/TemChart.vue'
-import lastEnergyChart from './valueDelivery/lastEnergyChart.vue'
-import horFloorSpace from './valueDelivery/horFloorSpace.vue'
-
+import hor_big_bg from "@/assets/horImg/hor_big_bg.png";
+import pageHead from "./valueDelivery/pageHead.vue";
+import NowData from "./valueDelivery/NowData.vue";
+import LastMonth from "./valueDelivery/LastMonthData.vue";
+import HorAirSwitch from "./valueDelivery/HorAirSwitch.vue";
+import lastSaveEnergy from "./valueDelivery/lastSaveEnergy.vue";
+import TemChart from "./valueDelivery/TemChart.vue";
+import lastEnergyChart from "./valueDelivery/lastEnergyChart.vue";
+import horFloorSpace from "./valueDelivery/horFloorSpace.vue";
+import { mapState } from "vuex";
 export default {
-    components: { pageHead, NowData, HorAirSwitch, LastMonth, lastSaveEnergy, TemChart, lastEnergyChart, horFloorSpace },
+    components: {
+        pageHead,
+        NowData,
+        HorAirSwitch,
+        LastMonth,
+        lastSaveEnergy,
+        TemChart,
+        lastEnergyChart,
+        horFloorSpace,
+    },
     data() {
         return {
             bgImg: hor_big_bg,
-            lastMonthTotal: require("@/assets/horImg/hor_lastMonthTotal.png")
-
-        }
-    }
-}
+            lastMonthTotal: require("@/assets/horImg/hor_lastMonthTotal.png"),
+        };
+    },
+    computed: {
+        ...mapState({
+            lastAllEnergy: (state) => {
+                //debugger;
+                var lastAllEnergy = state.lastAllEnergy;
+                lastAllEnergy.energyCompare = Number(
+                    (lastAllEnergy.energyCompare * 100).toFixed(0)
+                );
+                return lastAllEnergy;
+            },
+        }),
+    },
+};
 </script>
 <style lang="less" scoped>
 .horizontalScreen {
@@ -179,6 +203,3 @@ export default {
     }
 }
 </style>
-
-
-

+ 5 - 5
src/views/valueDelivery/AirSwitchVer.vue

@@ -47,15 +47,15 @@ export default {
         ...mapState({
             airValue(state) {
                 var openRate = state.airCondition.openRate;
-                var value = openRate
+                var avalue = openRate
                     ? Number((openRate * 100).toFixed(0))
                     : openRate;
-                return value;
+                return avalue;
             },
-            airStatus(state) {
+            airStatus: (state) => {
                 var openRate = state.airCondition.openRate;
-                var state = openRate ? true : false;
-                return state;
+                var astate = openRate ? true : false;
+                return astate;
             },
         }),
     },

+ 8 - 5
src/views/valueDelivery/HorAirSwitch.vue

@@ -46,17 +46,20 @@ export default {
     computed: {
         ...mapState({
             airValue: (state) => {
-             
                 var openRate = state.airCondition.openRate;
-                var value = openRate
+                var avalue = openRate
                     ? Number((openRate * 100).toFixed(0))
                     : openRate;
-                return value;
+                return avalue;
             },
             airStatus: (state) => {
+                //debugger
+                 var statecopu=JSON.parse(JSON.stringify(state))  ;
+                console.log('airStatus',statecopu);
+
                 var openRate = state.airCondition.openRate;
-                var state = openRate ? true : false;
-                return state;
+                var astate = openRate ? true : false;
+                return astate;
             },
         }),
     },

+ 1 - 1
src/views/valueDelivery/HorFloorSpace.vue

@@ -212,7 +212,7 @@ export default {
             var loading = this.$loading({ fullscreen: true });
 
             var endTime = moment();
-            var startTime = moment().subtract(15, "minutes");
+            var startTime = moment().subtract(15, "minutes");//往前取15分钟
             var startStr = startTime.format("YYYYMMDDHHmmss");
             var endStr = endTime.format("YYYYMMDDHHmmss");
             var param = this.selIndicator.code;

+ 11 - 27
src/views/valueDelivery/LastMonthData.vue

@@ -9,11 +9,7 @@
     >
         <div class="head-title"><span>上月数据</span></div>
         <div class="itemWrap">
-            <div
-                class="item"
-                v-for="(item, index) in lastDataArr"
-                :key="index"
-            >
+            <div class="item" v-for="(item, index) in lastDataArr" :key="index">
                 <div class="item-left">
                     <img :src="item.img" />
                 </div>
@@ -96,26 +92,28 @@ export default {
     created() {
         this.getLastMonthData();
     },
-    watch:{
-        lastDataArr(newv){
-            debugger;
-        }
+    watch: {
+        lastDataArr(newv,oldv) {
+            //debugger;
+            console.log('watch-lastDataArr',newv,oldv);
+        },
     },
     computed: {
         ...mapState({
-            lastDataArr(state) {
+            lastDataArr(state) {//state改变调用
+                var statecopu=JSON.parse(JSON.stringify(state))  ;
+                console.log('lastDataArr',statecopu);
+                console.log('lastDataArr-state-realTimeData',state.realTimeData);
+                 console.log('lastDataArr-state',state);
                 var lastMonthData = state.lastMonthData;
                 var lastMonthInit = [
                     {
                         id: "temp",
                         name: "温度",
                         code: "Tdb",
-                        value: 24.5,
                         unit: "℃",
                         maxName: "最高温",
-                        max: 37,
                         minName: "最低温",
-                        min: 24,
                         img: icon_temp,
                     },
                     {
@@ -187,20 +185,6 @@ export default {
     methods: {
         ...mapActions(["getLastMonthData"]),
         selectColor: selectColor,
-        // getLastMonthData() {
-        //     //上月温度
-        //     this.$axios
-        //         .post(this.$api.queryEnvHistory, {
-        //             projectId: "Pj1101080259",
-        //         })
-        //         .then((res) => {
-        //             this.lastMonthData.forEach(function(item) {
-        //                 item.value = res[item.id];
-        //                 item.max = res[item.id + "Max"];
-        //                 item.min = res[item.id + "Min"];
-        //             });
-        //         });
-        // },
     },
 };
 </script>

+ 133 - 76
src/views/valueDelivery/TemChart.vue

@@ -1,110 +1,124 @@
 <template>
     <div
         class="temChart"
-        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalTemChart' ]"
+        :class="[
+            screenType === 'hor'
+                ? 'horizontalClass'
+                : 'verticalClass verticalTemChart',
+        ]"
     >
         <div class="head-title">
             <span>实时温度</span>
             <div class="rightVal">
-                室外温度<span>28</span>℃
+                室外温度<span>{{ temperature }}</span
+                >℃
             </div>
         </div>
-        <div
-            id="tempChartBox"
-            class="tempChartBox"
-        ></div>
+        <div id="tempChartBox" class="tempChartBox"></div>
     </div>
 </template>
 <script>
-import G2 from '@antv/g2';
-import {mapActions} from "vuex"
+import G2 from "@antv/g2";
+import { mapActions } from "vuex";
+import moment from "moment";
 export default {
     name: "TemChart",
     props: {
         screenType: {
             type: String,
-            default: () => { return 'ver' } //hor 横屏  vert 竖屏
-        }
+            default: () => {
+                return "ver";
+            }, //hor 横屏  vert 竖屏
+        },
     },
     created() {
         console.log("created");
-
     },
     mounted() {
         console.log("mounted");
-        //this.getRealTimeTemp();
-        this.cInitChart();
+        this.getRealTimeTemp().then((res) => {
+            //debugger;
+            var cdata = res.data.data || [];
+            cdata.forEach((element) => {
+                var timestr = element.time;
+                var hour = timestr.substr(8, 2);
+                var minute = timestr.substr(10, 2);
+                element.time = hour + ":" + minute;
+            });
+            this.cInitChart(cdata);
+            this.getWeahter();
+        });
     },
     data() {
         return {
-
-        }
+            temperature: null,
+        };
     },
     methods: {
-        ...mapActions(['getRealTimeTemp']),
-        cInitChart() {
-            var data = [
-                { time: '8', type: '温度', temp: 23.5 },
-                { time: '9', type: '温度', temp: 26.5 },
-                { time: '10', type: '温度', temp: 29.5 },
-                { time: '11', type: '温度', temp: 30.5 },
-                { time: '12', type: '温度', temp: 26.5 },
-                { time: '13', type: '温度', temp: 29.5 },
-                { time: '14', type: '温度', temp: 30.5 },
-                { time: '15', type: '温度', temp: 33.5 },
-                { time: '16', type: '温度', temp: 34.5 },
-                { time: '17', type: '温度', temp: 30.5 },
-            ];
+        ...mapActions(["getRealTimeTemp"]),
+        cInitChart(cdata) {
+            // var data = [
+            //     { time: "8", type: "温度", temp: 23.5 },
+            //     { time: "9", type: "温度", temp: 26.5 },
+            //     { time: "10", type: "温度", temp: 29.5 },
+            //     { time: "11", type: "温度", temp: 30.5 },
+            //     { time: "12", type: "温度", temp: 26.5 },
+            //     { time: "13", type: "温度", temp: 29.5 },
+            //     { time: "14", type: "温度", temp: 30.5 },
+            //     { time: "15", type: "温度", temp: 33.5 },
+            //     { time: "16", type: "温度", temp: 34.5 },
+            //     { time: "17", type: "温度", temp: 30.5 },
+            // ];
             var chart = new G2.Chart({
-                container: 'tempChartBox',
+                container: "tempChartBox",
                 forceFit: true,
                 height: 330,
-                padding: [50, 40, 46, 60],
+                padding: [50, 50, 46, 60],
             });
-            chart.source(data);
+            chart.source(cdata);
 
-            chart.scale('time', {
+            chart.scale("time", {
                 //range: [0, 1],
                 //tickCount: 2,
                 //tickInterval
                 // type: 'timeCat'
             });
-            chart.scale('temp', {
+            chart.scale("temp", {
                 //range: [0, 1],
                 tickCount: 5,
-                minTickInterval:2,
+                minTickInterval: 2,
                 //ticks:[20,24,28,32]
                 //tickInterval
                 // type: 'timeCat'
             });
-            chart.axis('time', {
+            chart.axis("time", {
                 line: {
                     lineWidth: 1, // 设置线的宽度
-                    stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
-                    lineDash: [3, 3] // 设置虚线样式
+                    stroke: "rgba(155, 152, 173,0.4)", // 设置线的颜色
+                    lineDash: [3, 3], // 设置虚线样式
                 },
                 label: {
                     textStyle: {
-                        fill: '#9B98AD',
+                        fill: "#9B98AD",
                         fontSize: 12,
-                    }
+                    },
                 },
-                tickLine: null
+                tickLine: null,
             });
-            chart.axis('temp', {
+            chart.axis("temp", {
                 tickLine: null,
                 label: {
                     textStyle: {
-                        fill: '#9B98AD',
+                        fill: "#9B98AD",
                         fontSize: 12,
                     },
                     // formatter: function formatter(text) {
                     //     return text;
                     // }
-                }
+                },
             });
             chart.tooltip({
-                crosshairs: 'y'
+                crosshairs: "y",
             });
             chart.legend(false);
             //view1
@@ -115,63 +129,108 @@ export default {
             //view1
             //var view1 = chart.view();
 
-            chart.line().position('time*temp').color('#23CCF9').opacity(1).shape('smooth').style({
-                lineWidth: 3,
-
-            });
-            chart.point().position('time*temp').color('#23CCF9').opacity(1).shape('circle').style({
-                lineWidth: 1,
-                stroke: '#ffffff',
+            chart
+                .line()
+                .position("time*temp")
+                .color("#23CCF9")
+                .opacity(1)
+                .shape("smooth")
+                .style({
+                    lineWidth: 3,
+                });
+            chart
+                .point()
+                .position("time*temp")
+                .color("#23CCF9")
+                .opacity(1)
+                .shape("circle")
+                .style("time", {
+                    lineWidth: 2,
+                    stroke: "#ffffff",
+                    shadowColor: "#23CCF9",
+                    shadowBlur: (val) => {
+                        var nowtime = moment();
+                        var timestr = nowtime.format("HH") + ":00";
+                        if (val && val == timestr) {
+                            return 3;
+                        } else {
+                            return 0;
+                        }
+                    },
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                });
+            chart
+                .area()
+                .position("time*temp")
+                .color("l(90) 0:#23CCF9 1:#ffffff")
+                .opacity(0.2)
+                .tooltip(false)
+                .shape("smooth");
+            var lastpoint = cdata[cdata.length - 1];
+            const tooltipHtml = `<div style='line-height:22px;color:#fff;background: rgba(35,204,249,0.7);padding:10px 12px;border-radius:5px;'>
+                <div style='font-size:13px;font-weight:400;'>${lastpoint.time}</div>
+                <div style='font-size:12px;font-weight:600;'>室内温度:${lastpoint.temp}℃</div></div>`;
+            chart.guide().html({
+                position: lastpoint,
+                html: tooltipHtml,
+                alignX: "right",
+                alignY: "bottom",
+                offsetX: 10,
             });
-            chart.area().position('time*temp').color('l(90) 0:#23CCF9 1:#ffffff').opacity(0.2).tooltip(false).shape('smooth');
-
             chart.guide().text({
                 top: false,
                 limitInPlot: true,
-                position: ['max', 'min'], // 文本的起始位置,值为原始数据值,支持 callback
-                content: '时间/时分', // 显示的文本内容
+                position: ["max", "min"], // 文本的起始位置,值为原始数据值,支持 callback
+                content: "时间/时分", // 显示的文本内容
                 style: {
-                    fill: '#9590AD', // 文本颜色
-                    fontSize: '12' // 文本大小
+                    fill: "#9590AD", // 文本颜色
+                    fontSize: "12", // 文本大小
                     // fontWeight: 'bold' // 文本粗细
                     // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
                 }, // 文本的图形样式属性
-                offsetX: 16, // x 方向的偏移量
-                offsetY: 16 // y 方向偏移量
+                offsetX: 20, // x 方向的偏移量
+                offsetY: 16, // y 方向偏移量
             });
             chart.guide().text({
                 // position: ['min', 'max'], // 文本的起始位置,值为原始数据值,支持 callback
-                position: function (xScale, yScale) {
-                    console.log('position', xScale, yScale);
-                    return ['0%', '0%'];
+                position: function(xScale, yScale) {
+                    console.log("position", xScale, yScale);
+                    return ["0%", "0%"];
                 },
-                content: '温度/℃', // 显示的文本内容
+                content: "温度/℃", // 显示的文本内容
                 style: {
-                    fill: '#9590AD', // 文本颜色
-                    fontSize: '12' // 文本大小
+                    fill: "#9590AD", // 文本颜色
+                    fontSize: "12", // 文本大小
                     // fontWeight: 'bold' // 文本粗细
                     // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
                 }, // 文本的图形样式属性
                 offsetX: -40, // x 方向的偏移量
-                offsetY: -24// y 方向偏移量
+                offsetY: -24, // y 方向偏移量
             });
             chart.render();
             return chart;
-        }
-    }
-}
+        },
+        getWeahter() {
+            this.$axios
+                .get(this.$api.getWeatherCurrent + "?projectId=Pj1101020002")
+                .then((res) => {
+                    this.temperature = res.data.content.temperature;
+                });
+        },
+    },
+};
 </script>
 <style lang="less" scoped>
-
-.horizontalClass{
+.horizontalClass {
     // width:1036px;
     height: 388px;
 }
 .temChart {
-    padding: 24px 0 0!important;
+    padding: 24px 0 0 !important;
     .head-title {
         justify-content: space-between;
-        padding:0 32px;
+        padding: 0 32px;
         .rightVal {
             color: #39354e;
             font-size: 14px;
@@ -184,5 +243,3 @@ export default {
     }
 }
 </style>
-
-

+ 169 - 105
src/views/valueDelivery/lastEnergyChart.vue

@@ -1,45 +1,46 @@
 <template>
     <div
         class="lastChart"
-        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalTemChart' ]"
+        :class="[
+            screenType === 'hor'
+                ? 'horizontalClass'
+                : 'verticalClass verticalTemChart',
+        ]"
     >
         <div class="head-title">
             <span>上月每日能耗</span>
         </div>
-        <div
-            id="lastChartBox"
-            class="lastChartBox"
-        ></div>
+        <div id="lastChartBox" class="lastChartBox"></div>
         <!-- <div id="slider"></div> -->
     </div>
 </template>
 <script>
-import G2 from '@antv/g2';
-import DataSet from '@antv/data-set';
-import moment from 'moment';
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
+import moment from "moment";
 
 // 自定义 shape, 支持图片形式的气泡
-G2.Shape.registerShape('interval', 'borderRadius', {
+G2.Shape.registerShape("interval", "borderRadius", {
     draw: function draw(cfg, container) {
         var points = cfg.points;
         var path = [];
-        path.push(['M', points[0].x, points[0].y]);
-        path.push(['L', points[1].x, points[1].y]);
-        path.push(['L', points[2].x, points[2].y]);
-        path.push(['L', points[3].x, points[3].y]);
-        path.push('Z');
+        path.push(["M", points[0].x, points[0].y]);
+        path.push(["L", points[1].x, points[1].y]);
+        path.push(["L", points[2].x, points[2].y]);
+        path.push(["L", points[3].x, points[3].y]);
+        path.push("Z");
         path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
-        return container.addShape('rect', {
+        return container.addShape("rect", {
             attrs: {
                 x: path[1][1], // 矩形起始点为左上角
                 y: path[1][2],
                 width: path[2][1] - path[1][1],
                 height: path[0][2] - path[1][2],
                 fill: cfg.color,
-                radius: (path[2][1] - path[1][1]) / 2
-            }
+                radius: (path[2][1] - path[1][1]) / 2,
+            },
         });
-    }
+    },
 });
 
 export default {
@@ -47,138 +48,203 @@ export default {
     props: {
         screenType: {
             type: String,
-            default: () => { return 'ver' } //hor 横屏  vert 竖屏
-        }
+            default: () => {
+                return "ver";
+            }, //hor 横屏  vert 竖屏
+        },
     },
     created() {
         console.log("created");
     },
     mounted() {
         console.log("mounted");
-        this.cInitChart();
-        var start = moment('2021-08-01', 'YYYY-MM-DD');
-        var end = moment('2021-08-12', 'YYYY-MM-DD');
-        var end2 = moment('2021-08-12', 'YYYY-MM-DD');
-        console.log('start', start);
-        // var intervalInt = setInterval(() => {
-        //     start.add(1, 'days');
-        //     end.add(1, 'days');
-
-        //     //console.log('start', start);
-
-        //     this.ds.setState('start', start.format('YYYY-MM-DD'));
-        //     this.ds.setState('end', end.format('YYYY-MM-DD'));
-
-        //     if (end.format('YYYY-MM-DD') == end2.endOf('month').format('YYYY-MM-DD')) {
-        //         clearInterval(intervalInt);
-        //     }
-        // }, 800);
+        this.queryLastDayEnergy();
     },
     data() {
         return {
             ds: null,
-        }
+        };
     },
     methods: {
+        queryLastDayEnergy() {
+            //上月每日能耗
+            var start = moment()
+                .subtract(1, "months")
+                .startOf("month")
+                .format("YYYYMMDD");
+            var end = moment()
+                .subtract(1, "months")
+                .endOf("month")
+                .format("YYYYMMDD");
+
+            console.log("start", start);
+            this.$axios
+                .post(this.$api.queryLastDayEnergy, {
+                    criteria: {
+                        projectId: "Pj1101080259",
+                        date: {
+                            $gte: start,
+                            $lte: end,
+                        },
+                    },
+                })
+                .then((res) => {
+                    var resdata = res.data.content || [];
+                    //debugger;
+                    resdata.forEach(function(item) {
+                        var dateStr = item.date;
+                        item.Date =
+                            dateStr.substr(0, 4) +
+                            "-" +
+                            dateStr.substr(4, 2) +
+                            "-" +
+                            dateStr.substr(6, 2);
+                        item.value = (
+                            item.energyAcTerminal +
+                            item.energyCooling +
+                            item.energyHeating +
+                            item.energyLight
+                        ).toFixed(0);
+                    });
+                    var chart = this.cInitChart(resdata);
+                    var start = moment()
+                        .subtract(1, "months")
+                        .date(1);
+                    var end = moment()
+                        .subtract(1, "months")
+                        .date(12);
+                    var end2 = moment().subtract(1, "months");
+                    //debugger;
+
+                    // console.log("start", start);
+                    console.log("start", chart);
+                    console.log("start", this.ds);
+                    // var intervalInt = setInterval(() => {
+                    //     start.add(1, "days");
+                    //     end.add(1, "days");
+                    //     //debugger;
+                    //     console.log("start--", start);
+                    //     console.log("end--", end);
+                    //     this.ds.setState("start", start.format("YYYY-MM-DD"));
+                    //     this.ds.setState("end", end.format("YYYY-MM-DD"));
 
-        cInitChart() {
-            var data = [
-                { Date: '2021-08-01', type: '订阅数', value: 1300 },
-                { Date: '2021-08-02', type: '订阅数', value: 1200 },
-                { Date: '2021-08-03', type: '订阅数', value: 1350 },
-                { Date: '2021-08-04', type: '订阅数', value: 1100 },
-                { Date: '2021-08-05', type: '订阅数', value: 1005 },
-                { Date: '2021-08-06', type: '订阅数', value: 1200 },
-                { Date: '2021-08-07', type: '订阅数', value: 1100 },
-                { Date: '2021-08-08', type: '订阅数', value: 1100 },
-                { Date: '2021-08-09', type: '订阅数', value: 1200 },
-                { Date: '2021-08-10', type: '订阅数', value: 900 },
-                { Date: '2021-08-11', type: '订阅数', value: 800 },
-                { Date: '2021-08-12', type: '订阅数', value: 970 },
-                { Date: '2021-08-13', type: '订阅数', value: 1100 },
-                { Date: '2021-08-14', type: '订阅数', value: 1100 },
-                { Date: '2021-08-15', type: '订阅数', value: 1005 },
-                { Date: '2021-08-16', type: '订阅数', value: 1200 },
-                { Date: '2021-08-17', type: '订阅数', value: 1100 },
-                { Date: '2021-08-18', type: '订阅数', value: 1100 },
-                { Date: '2021-08-19', type: '订阅数', value: 1200 },
-                { Date: '2021-08-20', type: '订阅数', value: 900 },
-                { Date: '2021-08-21', type: '订阅数', value: 800 },
-                { Date: '2021-08-22', type: '订阅数', value: 970 },
-                { Date: '2021-08-23', type: '订阅数', value: 1100 },
-                { Date: '2021-08-24', type: '订阅数', value: 1100 },
-                { Date: '2021-08-25', type: '订阅数', value: 1005 },
-                { Date: '2021-08-26', type: '订阅数', value: 1200 },
-                { Date: '2021-08-27', type: '订阅数', value: 1100 },
-                { Date: '2021-08-28', type: '订阅数', value: 1100 },
-                { Date: '2021-08-29', type: '订阅数', value: 1200 }, { Date: '2021-08-30', type: '订阅数', value: 1200 },
-            ];
+                    //     if (
+                    //         end.format("YYYY-MM-DD") ==
+                    //         end2.endOf("month").format("YYYY-MM-DD")
+                    //     ) {
+                    //         clearInterval(intervalInt);
+                    //     }
+                    // }, 800);
+                });
+        },
+        cInitChart(cdata) {
+            // var data = [
+            //     { Date: "2021-08-01", type: "订阅数", value: 1300 },
+            //     { Date: "2021-08-02", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-03", type: "订阅数", value: 1350 },
+            //     { Date: "2021-08-04", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-05", type: "订阅数", value: 1005 },
+            //     { Date: "2021-08-06", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-07", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-08", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-09", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-10", type: "订阅数", value: 900 },
+            //     { Date: "2021-08-11", type: "订阅数", value: 800 },
+            //     { Date: "2021-08-12", type: "订阅数", value: 970 },
+            //     { Date: "2021-08-13", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-14", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-15", type: "订阅数", value: 1005 },
+            //     { Date: "2021-08-16", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-17", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-18", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-19", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-20", type: "订阅数", value: 900 },
+            //     { Date: "2021-08-21", type: "订阅数", value: 800 },
+            //     { Date: "2021-08-22", type: "订阅数", value: 970 },
+            //     { Date: "2021-08-23", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-24", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-25", type: "订阅数", value: 1005 },
+            //     { Date: "2021-08-26", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-27", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-28", type: "订阅数", value: 1100 },
+            //     { Date: "2021-08-29", type: "订阅数", value: 1200 },
+            //     { Date: "2021-08-30", type: "订阅数", value: 1200 },
+            // ];
+            //debugger;
             var ds = new DataSet({
                 state: {
-                    start: '2021-08-01',
-                    end: '2021-08-12'
-                }
-            })
+                    start: cdata[0].Date,
+                    end: cdata[11].Date,
+                },
+            });
             var dv = ds.createView();
-            dv.source(data).transform({
-                type: 'filter',
+            dv.source(cdata).transform({
+                type: "filter",
                 callback: function callback(obj) {
                     var date = obj.Date;
                     return date <= ds.state.end && date >= ds.state.start;
-                }
+                },
             });
             var chart = new G2.Chart({
-                container: 'lastChartBox',
+                container: "lastChartBox",
                 forceFit: true,
-                height: this.screenType === 'hor' ? 274 : 330,
+                height: this.screenType === "hor" ? 274 : 330,
                 padding: [20, 20, 36, 20],
             });
             chart.source(dv);
             chart.tooltip(false);
-            chart.scale('Date', {
+            chart.scale("Date", {
                 //range: [0, 1],
                 tickCount: 12,
                 //tickInterval:0,
-                type: 'timeCat',
-                mask: 'MM-DD',
+                type: "timeCat",
+                mask: "MM-DD",
                 // formatter: function formatter(val) {
                 //     console.log('val',val);
                 //     return val.substr(5);
                 // }
             });
-            chart.scale('value', {
+            chart.scale("value", {
                 //range: [0, 1],
                 tickCount: 5,
-                type: 'linear',
-                max: 1500
+                type: "linear",
+                max: 1500,
                 //tickInterval
                 // type: 'timeCat'
             });
-            chart.axis('Date', {
+            chart.axis("Date", {
                 line: {
                     lineWidth: 1, // 设置线的宽度
-                    stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
-                    lineDash: [3, 3] // 设置虚线样式
+                    stroke: "rgba(155, 152, 173,0.4)", // 设置线的颜色
+                    lineDash: [3, 3], // 设置虚线样式
                 },
                 label: {
                     textStyle: {
-                        fill: '#9B98AD',
+                        fill: "#9B98AD",
                         fontSize: 12,
-                    }
+                    },
                 },
-                tickLine: null
+                tickLine: null,
             });
-            chart.axis('value', false);
+            chart.axis("value", false);
 
             chart.legend(false);
 
-            chart.interval().position('Date*value').color('l(90) 0:#3E91F8 1:#76DEFF').opacity(1).shape('borderRadius').adjust({ type: 'stack' }).size(12).label('value', {
-                offset: 10,
-                textStyle: {
-                    fill: '#3281F6',
-                    fontSize: 12
-                }
-            });
+            chart
+                .interval()
+                .position("Date*value")
+                .color("l(90) 0:#3E91F8 1:#76DEFF")
+                .opacity(1)
+                .shape("borderRadius")
+                .adjust({ type: "stack" })
+                .size(12)
+                .label("value", {
+                    offset: 10,
+                    textStyle: {
+                        fill: "#3281F6",
+                        fontSize: 12,
+                    },
+                });
 
             chart.render();
             this.ds = ds;
@@ -207,9 +273,9 @@ export default {
             //     }
             // });
             return chart;
-        }
-    }
-}
+        },
+    },
+};
 </script>
 <style lang="less" scoped>
 .lastChart {
@@ -234,5 +300,3 @@ export default {
     }
 }
 </style>
-
-

+ 34 - 19
src/views/valueDelivery/lastSaveEnergy.vue

@@ -1,52 +1,69 @@
 <template>
     <div
         class="lastSaveEnergy"
-        :class="[screenType=='ver'?'verticalClass':'horizontalClass']"
+        :class="[screenType == 'ver' ? 'verticalClass' : 'horizontalClass']"
     >
         <div class="head-title">
             <span>上月节约能耗</span>
         </div>
         <div class="bottomCont">
-            <img src='@/assets/save_energy.png' />
+            <img src="@/assets/save_energy.png" />
             <div class="showData">
-                <div class="leftsave">节约电<br /><span>2566</span>度</div>
+                <div class="leftsave">
+                    节约电<br /><span>{{ lastAllEnergy.energySaving }}</span
+                    >度
+                </div>
                 <div class="equalTo">相当于</div>
-                <div class="saveCo2">减排<span>0.955</span>kg二氧化碳</div>
-                <div class="saveCarbon">减排<span>0.225</span>kg碳</div>
-                <div class="plantTree">为国家种<span>26</span>棵树</div>
+                <div class="saveCo2">
+                    减排<span>{{ lastAllEnergy.cdmCo2 }}</span
+                    >kg二氧化碳
+                </div>
+                <div class="saveCarbon">
+                    减排<span>{{ lastAllEnergy.cdmC }}</span
+                    >kg碳
+                </div>
+                <div class="plantTree">
+                    为国家种<span>{{ lastAllEnergy.cdmTree }}</span
+                    >棵树
+                </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-import air_close from '@/assets/horImg/air_close.png';
-import air_open from '@/assets/horImg/air_open.png';
+import air_close from "@/assets/horImg/air_close.png";
+import air_open from "@/assets/horImg/air_open.png";
+import { mapState } from "vuex";
 export default {
     name: "lastSaveEnergy",
     props: {
         screenType: {
             type: String,
-            default: () => { return 'hor' } //hor 横屏  vert 竖屏
-        }
+            default: () => {
+                return "hor";
+            }, //hor 横屏  vert 竖屏
+        },
     },
     data() {
-        return {
-
-        }
+        return {};
     },
-}
+    computed: {
+        ...mapState({
+            lastAllEnergy: (state) => state.lastAllEnergy,
+        }),
+    },
+};
 </script>
 <style lang="less" scoped>
-
 .lastSaveEnergy {
     &.verticalClass {
         height: 535px;
     }
-     &.horizontalClass {
+    &.horizontalClass {
         height: 100%;
     }
     .bottomCont {
-         width: 900px;
+        width: 900px;
         margin: 40px auto;
         position: relative;
         img {
@@ -100,5 +117,3 @@ export default {
     }
 }
 </style>
-
-

+ 20 - 5
src/views/verticalScreen.vue

@@ -3,13 +3,13 @@
         <div class="pageHead">
             <pageHead />
         </div>
-        <div >
+        <div style="display:none">
             <NowData screenType="ver" />
             <AirSwitchVer />
             <TemChart screenType="ver" />
             <LastMonthData screenType="ver" />
         </div>
-        <div style="display:none">
+        <div>
             <div class="lastTotalEnergy verticalClass">
                 <div class="head-title">
                     <span>上月总能耗</span>
@@ -19,9 +19,12 @@
                     <img src="@/assets/circleEnergy.png" />
                     <div class="showData">
                         <div class="title">比基准能耗</div>
-                        <div class="energySave">节能<span>50%</span></div>
+                        <div class="energySave">
+                            节能<span>{{ lastAllEnergy.energyCompare }}%</span>
+                        </div>
                         <div class="totalEnergy">
-                            总能耗<span>25541</span>KWh
+                            总能耗<span>{{ lastAllEnergy.energyTotal }}</span
+                            >KWh
                         </div>
                     </div>
                 </div>
@@ -41,7 +44,7 @@ import TemChart from "./valueDelivery/TemChart.vue";
 import lastEnergyChart from "./valueDelivery/lastEnergyChart.vue";
 import lastSaveEnergy from "./valueDelivery/lastSaveEnergy.vue";
 import pageHead from "./valueDelivery/pageHead.vue";
-
+import { mapState } from "vuex";
 export default {
     components: {
         NowData,
@@ -56,6 +59,18 @@ export default {
     data() {
         return {};
     },
+    computed: {
+        ...mapState({
+            lastAllEnergy: (state) => {
+               // debugger;
+                var lastAllEnergy = state.lastAllEnergy;
+                lastAllEnergy.energyCompare = Number(
+                    (lastAllEnergy.energyCompare * 100).toFixed(0)
+                );
+                return lastAllEnergy;
+            },
+        }),
+    },
 };
 </script>
 <style lang="less" scoped>