大屏开发

src/App.vue

@@ -12,7 +12,7 @@ export default {
         return {};
     },
     created() {
-       // this.getAirCondition();//空调数据
+        this.getAirCondition();//空调数据
     },
     components: {},
     methods: {

src/api/fistpage.ts

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

src/store/index.ts

@@ -7,13 +7,14 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
-        realTimeData: {}, //实时数据
+        realTimeData: [], //实时数据
         airCondition: {}, //空调情况
         realTimeTemp: [], //实时温度
-        lastMonthData: {}, //上月数据
+        lastMonthData: [], //上月数据
     },
     mutations: {
         getRealTimeData(state, data) {
+            //debugger;
             state.realTimeData = data;
         },
         getAirCondition(state, data) {
@@ -30,34 +31,28 @@ export default new Vuex.Store({
         getRealTimeData({ state, commit }, payload) {
             //实时数据
             axios
-                .post(api.queryEnvironmentData, {
-                    projectId: "Pj1101080259",
-                })
+                .get(api.queryEnvCurrent + "?projectId=Pj1101020002")
                 .then((res: any) => {
-                    commit({
-                        type: "getRealTimeData",
-                        data: res,
-                    });
+                    //debugger
+                    var resdata = res.data.data || [];
+                    commit("getRealTimeData", resdata);
                 });
         },
         getAirCondition({ state, commit }, payload) {
             //空调状态
             axios
-                .post(api.queryConditionerStatus, {
-                    projectId: "Pj1101080259",
-                })
+                .get(api.queryConditionerStatus + "?projectId=Pj1101020002")
                 .then((res: any) => {
-                    commit({
-                        type: "getAirCondition",
-                        data: res,
-                    });
+                    var resdata = res.data.data || {};
+                    // debugger;
+                    commit("getAirCondition", resdata);
                 });
         },
         getRealTimeTemp({ state, commit }, payload) {
             //实时温度
             axios
                 .post(api.queryIndoorTempList, {
-                    projectId: "Pj1101080259",
+                    projectId: "Pj1101020002",
                 })
                 .then((res: any) => {
                     // commit({
@@ -69,14 +64,11 @@ export default new Vuex.Store({
         getLastMonthData({ state, commit }, payload) {
             //上月温度
             axios
-                .post(api.queryLastMonthData, {
-                    projectId: "Pj1101080259",
-                })
+                .get(api.queryEnvHistory + "?projectId=Pj1101020002")
                 .then((res: any) => {
-                    commit({
-                        type: "getLastMonthData",
-                        data: res,
-                    });
+                    debugger;
+                    var resdata = res.data.data || [];
+                    commit("getLastMonthData", resdata);
                 });
         },
     },

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/duoduo-service/object-service";
+axios.defaults.baseURL = "/daping";// /daping/duoduo-service/object-service
 
 //添加请求拦截器
 axios.interceptors.request.use(

src/utils/publicMethod.ts

@@ -3,54 +3,88 @@
 // }
 // const allTypes: Record<string, boolean> = { jpg: true, gif: true };
 //var publicMethod = {
-var selectColor = function(value: any, typestr: string) {
+var selectColor = function(value: any, typestr: string, floor: any) {
+    if (value === null || value === undefined) return null;
     var colorArr: { [key: string]: Array<any> } = {
         temp: [
-            { min: Number.NEGATIVE_INFINITY, max: 20, color: "#52A0FF" },
-            { min: 20, max: 22, color: "#40DDCE" },
-            { min: 22, max: 27, color: "#7ED874" },
-            { min: 27, max: 28, color: "#C4E34F" },
-            { min: 28, max: 30, color: "#EE9F2B" },
-            { min: 30, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+            {
+                min: Number.NEGATIVE_INFINITY,
+                max: 20,
+                color: "#52A0FF",
+                fcolor: "#CEE3FC",
+            },
+            { min: 20, max: 22, color: "#40DDCE", fcolor: "#C4F2EE" },
+            { min: 22, max: 27, color: "#7ED874", fcolor: "#D9F5D6" },
+            { min: 27, max: 28, color: "#C4E34F", fcolor: "#E5F3C9" },
+            { min: 28, max: 30, color: "#EE9F2B", fcolor: "#F9DFB8" },
+            {
+                min: 30,
+                max: Number.POSITIVE_INFINITY,
+                color: "#F5483D",
+                fcolor: "#FCC8C5",
+            },
         ],
         humidity: [
-            { min: 0, max: 30, color: "#F5483D" },
-            { min: 30, max: 35, color: "#EE9F2B" },
-            { min: 35, max: 65, color: "#7ED874" },
-            { min: 65, max: 95, color: "#40DDCE" },
-            { min: 95, max: Number.POSITIVE_INFINITY, color: "#52A0FF" },
+            { min: 0, max: 30, color: "#F5483D", fcolor: "#F9DFB8" },
+            { min: 30, max: 35, color: "#EE9F2B", fcolor: "#E5F3C9" },
+            { min: 35, max: 65, color: "#7ED874", fcolor: "#D9F5D6" },
+            { min: 65, max: 95, color: "#40DDCE", fcolor: "#C4F2EE" },
+            {
+                min: 95,
+                max: Number.POSITIVE_INFINITY,
+                color: "#52A0FF",
+                fcolor: "#CEE3FC",
+            },
         ],
         co2: [
-            { min: 0, max: 800, color: "#7ED874" },
-            { min: 800, max: 1000, color: "#C4E34F" },
-            { min: 1000, max: 2500, color: "#EE9F2B" },
-            { min: 2500, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+            { min: 0, max: 800, color: "#7ED874", fcolor: "#D9F5D6" },
+            { min: 800, max: 1000, color: "#C4E34F", fcolor: "#E5F3C9" },
+            { min: 1000, max: 2500, color: "#EE9F2B", fcolor: "#F9DFB8" },
+            {
+                min: 2500,
+                max: Number.POSITIVE_INFINITY,
+                color: "#F5483D",
+                fcolor: "#FCC8C5",
+            },
         ],
         methanal: [
-            { min: 0, max: 0.08, color: "#7ED874" },
-            { min: 0.08, max: 0.1, color: "#C4E34F" },
-            { min: 0.1, max: 0.2, color: "#EE9F2B" },
-            { min: 0.2, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+            { min: 0, max: 0.08, color: "#7ED874", fcolor: "#D9F5D6" },
+            { min: 0.08, max: 0.1, color: "#C4E34F", fcolor: "#E5F3C9" },
+            { min: 0.1, max: 0.2, color: "#EE9F2B", fcolor: "#F9DFB8" },
+            {
+                min: 0.2,
+                max: Number.POSITIVE_INFINITY,
+                color: "#F5483D",
+                fcolor: "#FCC8C5",
+            },
         ],
         pm25: [
-            { min: 0, max: 35, color: "#7ED874" },
-            { min: 35, max: 75, color: "#C4E34F" },
-            { min: 75, max: 150, color: "#EFD62E" },
-            { min: 150, max: 250, color: "#EE9F2B" },
-            { min: 250, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+            { min: 0, max: 35, color: "#7ED874", fcolor: "#D9F5D6" },
+            { min: 35, max: 75, color: "#C4E34F", fcolor: "#E5F3C9" },
+            { min: 75, max: 150, color: "#EFD62E", fcolor: "#F7F0C0" },
+            { min: 150, max: 250, color: "#EE9F2B", fcolor: "#F9DFB8" },
+            {
+                min: 250,
+                max: Number.POSITIVE_INFINITY,
+                color: "#F5483D",
+                fcolor: "#FCC8C5",
+            },
         ],
     };
-    console.log("typestr", typestr);
-    console.log("value", value);
+    // console.log("typestr", typestr);
+    //  console.log("value", value);
     var nowColorArr = colorArr[typestr];
     var color = null;
     nowColorArr.forEach((ele: any) => {
         if (value > ele.min && value < ele.max) {
-            color = ele.color;
+            color = floor ? ele.fcolor : ele.color;
         }
     });
     return color;
 };
+var operateNum=function(num:any){
+return num.toFixed(1);
+}
 //};
 
 export { selectColor };

src/views/valueDelivery/AirSwitchVer.vue

@@ -3,7 +3,7 @@
         <div class="air-title head-title">
             <span>空调实时开关</span>
             <span class="status">{{
-                status ? "空调已开启" : "空调已关闭"
+                airStatus ? "空调已开启" : "空调已关闭"
             }}</span>
         </div>
         <div class="air-cont">
@@ -13,11 +13,11 @@
                 </div>
                 <div class="air-rate">
                     <span>空调开启率</span>
-                    <span class="air-rate-value">{{ value }}%</span>
+                    <span class="air-rate-value">{{ airValue }}%</span>
                 </div>
             </div>
             <div class="air-bg">
-                <img :src="[status ? img.openImg : img.closeImg]" />
+                <img :src="[airStatus ? img.openImg : img.closeImg]" />
             </div>
         </div>
     </div>
@@ -25,7 +25,7 @@
 <script>
 import air_close from "@/assets/horImg/air_close.png";
 import air_open from "@/assets/horImg/air_open.png";
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
 
 export default {
     name: "AirSwitch",
@@ -43,10 +43,20 @@ export default {
             }, // 默认开
         },
     },
-
     computed: {
         ...mapState({
-            airCondition: (state) => state.airCondition,
+            airValue(state) {
+                var openRate = state.airCondition.openRate;
+                var value = openRate
+                    ? Number((openRate * 100).toFixed(0))
+                    : openRate;
+                return value;
+            },
+            airStatus(state) {
+                var openRate = state.airCondition.openRate;
+                var state = openRate ? true : false;
+                return state;
+            },
         }),
     },
     data() {

src/views/valueDelivery/FloorSpace.vue

@@ -4,8 +4,8 @@
             <div class="allIndicator">
                 <div
                     class="eachItem"
-                    v-for="item in allIndicator"
-                    @click="clickIndicator(item)"
+                    v-for="(item, index) in allIndicator"
+                    @click="clickIndicator(index)"
                     v-bind:class="{ select: item.id == selIndicator.id }"
                 >
                     <span>{{ item.name }}</span
@@ -27,19 +27,31 @@
         <div class="floorWrap">
             <div
                 class="floor-item"
-                v-for="(item, index) in floorData"
+                v-for="(item, index) in showFloors"
                 :key="index"
             >
                 <div class="floor-num">
-                    <span>{{ item.floorName }}</span>
+                    <span>{{ item.localName }}</span>
                 </div>
                 <div class="floor-space">
                     <div
                         class="space-box"
-                        v-for="(childItem, id) in item.data"
+                        v-for="(childItem, id) in item.dataSpaces"
                         :key="id"
+                        v-bind:style="{ width: item.spacewidth + '%' }"
                     >
-                        <div class="space-name">{{ childItem.name }}</div>
+                        <div
+                            class="space-name"
+                            v-bind:style="{
+                                backgroundColor: selectColor(
+                                    childItem.avgValues,
+                                    selIndicator.id,
+                                    true
+                                ),
+                            }"
+                        >
+                            {{ childItem.localName }}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -48,82 +60,82 @@
 </template>
 <script>
 import { Loading } from "element-ui";
+import moment from "moment";
+import { selectColor } from "@/utils/publicMethod";
+
 export default {
     name: "FloorSpace",
     data() {
         return {
             selIndicator: {},
+            nowIndicatorIndex: null, //现在选中的指标 index
+
             allIndicator: [
                 {
                     id: "temp",
                     name: "温度",
                     img: require("../../assets/verwendu.png"),
                     unit: "℃",
+                    code: "Tdb",
                 },
                 {
                     id: "humidity",
+                    code: "RH",
                     name: "湿度",
                     img: require("../../assets/vershidu.png"),
                     unit: "%",
                 },
                 {
                     id: "co2",
+                    code: "CO2",
                     name: "CO₂",
                     img: require("../../assets/verco2.png"),
                     unit: "ppm",
                 },
                 {
                     id: "methanal",
+                    code: "HCHO",
                     name: "甲醛",
                     img: require("../../assets/verjiaquan.png"),
                     unit: "mg/m³",
                 },
                 {
                     id: "pm25",
+                    code: "PM2d5",
                     name: "PM2.5",
                     img: require("../../assets/verpm25.png"),
                     unit: "ug/m³",
                 },
             ],
-            floorData: [
-                {
-                    floorName: "8F",
-                    data: [
-                        { id: 1, name: "空间1" },
-                        { id: 2, name: "空间2" },
-                        { id: 3, name: "空间3" },
-                        { id: 1, name: "空间4" },
-                        { id: 2, name: "空间5" },
-                        { id: 3, name: "空间6" },
-                        { id: 1, name: "空间1" },
-                        { id: 2, name: "空间2" },
-                        { id: 3, name: "空间3" },
-                        { id: 1, name: "空间4" },
-                        { id: 2, name: "空间5" },
-                        { id: 3, name: "空间6" },
-                    ],
-                },
-                {
-                    floorName: "7F",
-                    data: [
-                        { id: 1, name: "空间1" },
-                        { id: 2, name: "空间2" },
-                        { id: 3, name: "空间3" },
-                    ],
-                },
-            ],
+
+            allFloor: [],
             firstPageParams: [],
             secondPageParams: [],
             nowPage: 1, //当前哪一屏幕
+            showFloors: [],
         };
     },
+    watch: {
+        nowIndicatorIndex(newv, oldv) {
+            // debugger;
+            if (newv == oldv) return;
+            this.selIndicator = this.allIndicator[newv];
+            this.showFloors = [];
+            //第一屏的参数 第二屏的参数
+            var floorparam =
+                this.nowPage == 1
+                    ? this.firstPageParams
+                    : this.secondPageParams;
+            this.queryParam(floorparam);
+        },
+    },
     mounted() {
-        this.selIndicator = this.allIndicator[0];
         this.queryFs();
     },
     methods: {
-        clickIndicator(item) {
-            this.selIndicator = item;
+        selectColor: selectColor,
+        clickIndicator(index) {
+            this.nowIndicatorIndex = index;
         },
         queryFs() {
             //let loadingInstance = Loading.service({ fullscreen: true });
@@ -147,6 +159,10 @@ export default {
                     loading.close();
                     console.log("queryFs", res);
                     var allFloor = res.data.content || [];
+                    allFloor = allFloor.filter(function(item) {
+                        return item.spaceNum > 0;
+                    });
+                    this.allFloor = allFloor;
                     var allFloorNum = allFloor.length;
                     //如果超过7层 就显示两屏幕 第一屏 firstPageNum
                     //如果超过7层 就显示两屏幕 第二屏 secondPageNum
@@ -181,19 +197,60 @@ export default {
                         obj.spaceNum = sendMaxSpace;
                         return obj;
                     });
-                    this.queryParam(this.firstPageParams);
+                    this.nowIndicatorIndex = 0;
+                    // var floorparam =
+                    //     this.nowPage == 1
+                    //         ? this.firstPageParams
+                    //         : this.secondPageParams;
+                    // this.queryParam(floorparam);
+                }).catch((res) =>{
+                      loading.close();
                 });
         },
 
-        queryParam(param) {
+        queryParam(floorparam) {
             var loading = this.$loading({ fullscreen: true });
-            this.$axios.post(this.$api.queryParam, param).then((res) => {
-                loading.close();
-                debugger;
-            });
+            //             Tdb 温度
+            // CO2 二氧化碳
+            // RH 湿度
+            // HCHO甲醛
+            // PM2d5 pm2.5
+
+            var endTime = moment();
+            var startTime = moment().subtract(15, "minutes");
+            var startStr = startTime.format("YYYYMMDDHHmmss");
+            var endStr = endTime.format("YYYYMMDDHHmmss");
+
+            var param = this.selIndicator.code;
+            this.$axios
+                .post(
+                    `${this.$api.queryParam}?endTime=${endStr}&startTime=${startStr}&param=${param}`,
+                    floorparam
+                )
+                .then((res) => {
+                    loading.close();
+                    console.log("queryParam", res);
+                    var showFloors = res.data.content || [];
+                    showFloors.forEach((ele) => {
+                        var filterFloorarr = this.allFloor.filter((item) => {
+                            return item.id == ele.id;
+                        });
+                        var filterFloor = filterFloorarr[0] || {};
+                        ele.name = filterFloor.name;
+                        ele.localId = filterFloor.localId;
+                        ele.localName = filterFloor.localName;
+                        var dataSpacesNum = (ele.dataSpaces || []).length;
+                        var lineNum = this.spaceHandle(dataSpacesNum); //一行的个数
+                        //debugger;
+                        ele.spacewidth = 100 / lineNum;
+                    });
+                    this.showFloors = showFloors;
+                    console.log("showFloors", showFloors);
+                });
         },
-        floorHandle(floorNum) {//返回一层 最多多少房间
-            var maxFloorSpace = 0; //一层 最多显示房间数
+        floorHandle(floorNum) {
+            //返回一层 最多多少房间
+            var maxFloorSpace = 1; //一层 最多显示房间数
             switch (floorNum) {
                 case 1:
                     maxFloorSpace = 160;
@@ -215,10 +272,13 @@ export default {
             }
             return maxFloorSpace;
         },
-        spaceHandle(spaceNum) {//返回一层 的每一行 几个房间
+        spaceHandle(spaceNum) {
+            //返回一层 的每一行 几个房间
             var lineNum = spaceNum; //一行的房间数
             var floorline = Math.ceil(spaceNum / 10); //20-30 3排 30-40个 4排 所以一排10个
             lineNum = Math.ceil(spaceNum / floorline);
+            return lineNum;
+            //debugger;
         },
     },
 };
@@ -259,6 +319,7 @@ export default {
     .imageDiv {
         height: 32px;
         margin: 0 32px;
+        text-align: center;
     }
     .textCont {
         color: #3b3558;
@@ -305,14 +366,16 @@ export default {
         flex-wrap: wrap;
         .space-box {
             padding: 4px;
+            box-sizing: border-box;
             .space-name {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 height: 86px;
-                width: 90px;
+                min-width: 80px;
                 border-radius: 8px;
                 background: #d9f5d6;
+                text-align: center;
             }
         }
     }

src/views/valueDelivery/HorAirSwitch.vue

@@ -3,42 +3,37 @@
         <div class="head-title">
             <span>空调实时开关</span>
         </div>
-        <div class="air-status" v-bind:class="{ close: !status }">
-            <span>{{ status ? "空调已开启" : "空调已关闭" }}</span>
+        <div class="air-status" v-bind:class="{ close: !airStatus }">
+            <span>{{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
         </div>
         <div class="air-bg">
-            <img :src="[status ? img.openImg : img.closeImg]" />
+            <img :src="[airStatus ? img.openImg : img.closeImg]" />
         </div>
         <div class="air-rate">
             <span>空调开启率</span>
-            <span class="air-rate-value">{{ value }}%</span>
+            <span class="air-rate-value">{{ airValue }}%</span>
         </div>
     </div>
 </template>
 <script>
 import air_open from "@/assets/horImg/air_open.png";
 import air_close from "@/assets/horImg/air_close.png";
-import {mapState} from 'vuex';
+import { mapState } from "vuex";
 export default {
     name: "AirSwitch",
     props: {
-        status: {
-            type: Boolean,
-            default: () => {
-                return false;
-            }, // 默认开
-        },
-        value: {
-            type: Number,
-            default: () => {
-                return 75;
-            }, // 默认开
-        },
-    },
-    computed: {
-        ...mapState({
-            airCondition: (state) => state.airCondition,
-        }),
+        // status: {
+        //     type: Boolean,
+        //     default: () => {
+        //         return false;
+        //     }, // 默认开
+        // },
+        // value: {
+        //     type: Number,
+        //     default: () => {
+        //         return 75;
+        //     }, // 默认开
+        // },
     },
     data() {
         return {
@@ -48,6 +43,28 @@ export default {
             },
         };
     },
+    computed: {
+        ...mapState({
+            airValue: (state) => {
+             
+                var openRate = state.airCondition.openRate;
+                var value = openRate
+                    ? Number((openRate * 100).toFixed(0))
+                    : openRate;
+                return value;
+            },
+            airStatus: (state) => {
+                var openRate = state.airCondition.openRate;
+                var state = openRate ? true : false;
+                return state;
+            },
+        }),
+    },
+    watch: {
+        airStatus: function(newv, oldv) {
+            //debugger;
+        },
+    },
 };
 </script>
 <style lang="less" scoped>

src/views/valueDelivery/HorFloorSpace.vue

@@ -20,8 +20,8 @@
             <div class="allIndicator">
                 <div
                     class="eachItem "
-                    v-for="item in allIndicator"
-                    @click="clickIndicator(item)"
+                    v-for="(item,index) in allIndicator"
+                    @click="clickIndicator(index)"
                     v-bind:class="{'select':item.id==selIndicator.id}"
                 >
                     <div class="title">{{item.name}}</div>
@@ -41,17 +41,18 @@
         <div class="floorWrap">
             <div
                 class="floor-item"
-                v-for="(item,index) in floorData"
+                v-for="(item,index) in showFloors"
                 :key="index"
             >
-                <div class="floor-num"><span>{{item.floorName}}</span></div>
+                <div class="floor-num"><span>{{item.localName}}</span></div>
                 <div class="floor-space">
                     <div
                         class="space-box"
-                        v-for="(childItem,id) in item.data"
+                        v-for="(childItem,id) in item.dataSpaces"
                         :key="id"
+                        v-bind:style="{ width: item.spacewidth + '%' }"
                     >
-                        <div class="space-name">{{childItem.name}}</div>
+                        <div class="space-name" v-bind:style="{backgroundColor:selectColor(childItem.avgValues,selIndicator.id,true)}">{{childItem.localName}}</div>
                     </div>
                 </div>
             </div>
@@ -60,78 +61,85 @@
 
 </template>
 <script>
+import moment from "moment";
+import { selectColor } from "@/utils/publicMethod";
+
 export default {
     name: 'FloorSpace',
     data() {
         return {
-            selIndicator: {},
+            selIndicator: {},      
+             //              温度
+            //  二氧化碳
+            //  湿度
+            // 
+            //  pm2.5
+            nowIndicatorIndex:null,//现在选中的指标 index
             allIndicator: [{
                 id: 'temp',
+                code:'Tdb',
                 name: '温度',
                 img: require('../../assets/horImg/wendu.png'),
                 unit: '℃'
             }, {
                 id: 'humidity',
+                code:'RH',
                 name: '湿度',
                 img: require('../../assets/horImg/shidu.png'),
                 unit: '%'
             }, {
                 id: 'co2',
+                code:'CO2',
                 name: 'CO₂',
                 img: require('../../assets/horImg/co2.png'),
                 unit: 'ppm'
             }, {
                 id: 'methanal',
+                code:'HCHO',
                 name: '甲醛',
                 img: require('../../assets/horImg/jiaquan.png'),
                 unit: 'mg/m³'
 
             }, {
                 id: 'pm25',
+                code:'PM2d5',
                 name: 'PM2.5',
                 img: require('../../assets/horImg/pm25.png'),
                 unit: 'ug/m³'
             }],
-            floorData: [
-                {
-                    floorName: '8F',
-                    data: [
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                        { id: 1, name: '空间4' },
-                        { id: 2, name: '空间5' },
-                        { id: 3, name: '空间6' },
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                        { id: 1, name: '空间4' },
-                        { id: 2, name: '空间5' },
-                        { id: 3, name: '空间6' },
-                    ]
-                },
-                {
-                    floorName: '7F',
-                    data: [
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                    ]
-                },
-            ],
+
+            allFloor: [],
             firstPageParams: [],
             secondPageParams: [],
             nowPage: 1, //当前哪一屏幕
+
+            showFloors: [],
         }
     },
+    watch: {
+        nowIndicatorIndex(newv, oldv) {
+            // debugger;
+            if (newv == oldv) return;
+            this.selIndicator = this.allIndicator[newv];
+            this.showFloors =[];
+            //第一屏的参数 第二屏的参数
+            var floorparam =
+                this.nowPage == 1
+                    ? this.firstPageParams
+                    : this.secondPageParams;
+            this.queryParam(floorparam);
+        },
+    },
     mounted() {
-        this.selIndicator = this.allIndicator[0];
+       // this.selIndicator = this.allIndicator[0];
+         this.queryFs();
     },
     methods: {
-        clickIndicator(item) {
-            this.selIndicator = item;
+        selectColor:selectColor,
+        clickIndicator(index) {
+            this.nowIndicatorIndex = index;
         },
-        queryFs() {
+         queryFs() {
             //let loadingInstance = Loading.service({ fullscreen: true });
             var loading = this.$loading({ fullscreen: true });
             this.$axios
@@ -153,6 +161,10 @@ export default {
                     loading.close();
                     console.log("queryFs", res);
                     var allFloor = res.data.content || [];
+                    allFloor = allFloor.filter(function(item) {
+                        return item.spaceNum > 0;
+                    });
+                    this.allFloor = allFloor;
                     var allFloorNum = allFloor.length;
                     //如果超过7层 就显示两屏幕 第一屏 firstPageNum
                     //如果超过7层 就显示两屏幕 第二屏 secondPageNum
@@ -165,8 +177,6 @@ export default {
                         secondPageNum = Math.floor(allFloorNum / 2);
                     }
 
-                    //this.nowPage = 1; //取第一屏
-
                     var firstMaxSpace = this.floorHandle(firstPageNum); //第一屏 一层最多空间
                     var sendMaxSpace = this.floorHandle(secondPageNum);
                     var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
@@ -187,35 +197,73 @@ export default {
                         obj.spaceNum = sendMaxSpace;
                         return obj;
                     });
-                    this.queryParam(this.firstPageParams);
+                    //第一屏的参数 第二屏的参数
+                    // var floorparam =
+                    //     this.nowPage == 1
+                    //         ? this.firstPageParams
+                    //         : this.secondPageParams;
+                    // this.queryParam(floorparam);
+                    this.nowIndicatorIndex=0;
+                }).catch(function(res){
+                    loading.close();
                 });
         },
-        queryParam(param) {
+        queryParam(floorparam) {
             var loading = this.$loading({ fullscreen: true });
-            this.$axios.post(this.$api.queryParam, param).then((res) => {
-                loading.close();
-                debugger;
-            });
+
+            var endTime = moment();
+            var startTime = moment().subtract(15, "minutes");
+            var startStr = startTime.format("YYYYMMDDHHmmss");
+            var endStr = endTime.format("YYYYMMDDHHmmss");
+            var param = this.selIndicator.code;
+            this.$axios
+                .post(
+                    `${this.$api.queryParam}?endTime=${endStr}&startTime=${startStr}&param=${param}`,
+                    floorparam
+                )
+                .then((res) => {
+                    loading.close();
+                    console.log("queryParam", res);
+                    var showFloors = res.data.content || [];
+                    showFloors.forEach((ele) => {
+                        var filterFloorarr = this.allFloor.filter((item) => {
+                            return item.id == ele.id;
+                        });
+                        var filterFloor = filterFloorarr[0] || {};
+                        ele.name = filterFloor.name;
+                        ele.localId = filterFloor.localId;
+                        ele.localName = filterFloor.localName;
+                        var dataSpacesNum = ele.dataSpaces.length;//一层的空间数
+                        var lineNum = this.spaceHandle(dataSpacesNum,showFloors.length) ; //一行的个数
+                        //debugger;
+                        ele.spacewidth = 100 / lineNum;
+                    });
+                    this.showFloors = showFloors;
+                    console.log('showFloors',showFloors);
+                });
         },
-        spaceHandle(floorNum, spaceNum){//返回一层 的每一行 几个房间
-         if (floorNum == 1) {//最多一层时
-                if (spaceNum > 2 && spaceNum <= 24 ) {
-                    lineNum = spaceNum / 2;
-                }else if (spaceNum > 24 && spaceNum <= 36) {
-                    lineNum = Math.ceil(spaceNum / 3);
-                } else if (spaceNum > 36 && spaceNum <= 48) {
-                    lineNum = Math.ceil(spaceNum / 4);
-                } else if (spaceNum > 48 && spaceNum <= 60) {//48-60个 5行
-                    lineNum = Math.ceil(spaceNum / 5);
+        spaceHandle(spaceNum,floorNum){//返回一层 的每一行 几个房间
+            var lineNum = spaceNum; //一行的房间数
+            if (floorNum == 1) {//最多一层时
+                    if (spaceNum > 2 && spaceNum <= 24 ) {
+                        lineNum = spaceNum / 2;
+                    }else if (spaceNum > 24 && spaceNum <= 36) {
+                        lineNum = Math.ceil(spaceNum / 3);
+                    } else if (spaceNum > 36 && spaceNum <= 48) {
+                        lineNum = Math.ceil(spaceNum / 4);
+                    } else if (spaceNum > 48 && spaceNum <= 60) {//48-60个 5行
+                        lineNum = Math.ceil(spaceNum / 5);
+                    }
+                }else{
+                    //debugger;
+                    var floorline = Math.ceil(spaceNum / 16); //20-30 3排 30-40个 4排 一层排数
+                    lineNum = Math.ceil(spaceNum / floorline);
                 }
-            }else{
-                var floorline = Math.ceil(spaceNum / 16); //20-30 3排 30-40个 4排 一层排数
-                lineNum = Math.ceil(spaceNum / floorline);
-            }
+                //debugger;
+                return lineNum;
         },
-        floorHandle(floorNum, spaceNum) {
-            var lineNum = spaceNum;//一行的房间数
-            var maxFloorSpace = 0;//一层 最多显示房间数
+        floorHandle(floorNum) {
+            var maxFloorSpace = 1;//一层 最多显示房间数
               switch (floorNum) {
                 case 1:
                     maxFloorSpace = 60;
@@ -233,7 +281,7 @@ export default {
                     maxFloorSpace = 16;
                     break;
             }
-   
+            return maxFloorSpace;
         //  if(floorNum == 2) {
         //     if (spaceNum > 16 && spaceNum < = 32 ) {
         //         lineNum = Math.ceil(spaceNum / 2);
@@ -379,14 +427,16 @@ export default {
         flex-wrap: wrap;
         .space-box {
             padding: 4px;
+            box-sizing: border-box;
             .space-name {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 height: 86px;
-                width: 90px;
+                min-width: 20px;
                 border-radius: 8px;
                 background: #d9f5d6;
+                text-align: center;
             }
         }
     }

src/views/valueDelivery/LastMonthData.vue

@@ -11,7 +11,7 @@
         <div class="itemWrap">
             <div
                 class="item"
-                v-for="(item, index) in lastMonthData"
+                v-for="(item, index) in lastDataArr"
                 :key="index"
             >
                 <div class="item-left">
@@ -79,7 +79,7 @@ import icon_CO2 from "@/assets/icon_CO2.png";
 import icon_formaldehyde from "@/assets/icon_formaldehyde.png";
 import icon_PM2d5 from "@/assets/icon_PM2d5.png";
 import { selectColor } from "@/utils/publicMethod";
-import { mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 export default {
     name: "lastMonthData",
     props: {
@@ -91,93 +91,116 @@ export default {
         },
     },
     data() {
-        return {
-            lastMonthData: [
-                {
-                    id: "temp",
-                    name: "温度",
-                    value: 24.5,
-                    unit: "℃",
-                    maxName: "最高温",
-                    max: 37,
-                    minName: "最低温",
-                    min: 24,
-                    img: icon_temp,
-                },
-                {
-                    id: "humidity",
-                    name: "湿度",
-                    value: 100,
-                    unit: "%",
-                    maxName: "最大值",
-                    max: 50,
-                    minName: "最小值",
-                    min: 20,
-                    img: icon_humidity,
-                },
-                {
-                    id: "co2",
-                    name: "CO2",
-                    value: 2600,
-                    unit: "ppm",
-                    maxName: "最大值",
-                    max: 2600,
-                    minName: "最小值",
-                    min: 300,
-                    img: icon_CO2,
-                },
-                {
-                    id: "methanal",
-                    name: "甲醛",
-                    value: 0.03,
-                    unit: "mg/m³",
-                    maxName: "最大值",
-                    max: 0.01,
-                    minName: "最小值",
-                    min: 0.07,
-                    img: icon_formaldehyde,
-                },
-                {
-                    id: "pm25",
-                    name: "PM2.5",
-                    value: 120,
-                    unit: "ug/m³",
-                    maxColor: "#C4E34F",
-                    minColor: "#7ed874",
-                    maxName: "最大值",
-                    max: 340,
-                    minName: "最小值",
-                    min: 20,
-                    img: icon_PM2d5,
-                },
-            ],
-        };
+        return {};
     },
     created() {
-        //this.getLastMonthData();
+        this.getLastMonthData();
     },
-    methods: {
-        //...mapActions(['getLastMonthData']),
-        // linearGraient(start,end){
-        //     return {
-        //         "border-image":linear-gradient(start,end) 0 18
-        //     }
-        // }
-        selectColor: selectColor,
-        getLastMonthData() {
-            //上月温度
-            this.$axios
-                .post(this.$api.queryLastMonthData, {
-                    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"];
+    watch:{
+        lastDataArr(newv){
+            debugger;
+        }
+    },
+    computed: {
+        ...mapState({
+            lastDataArr(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,
+                    },
+                    {
+                        id: "humidity",
+                        name: "湿度",
+                        code: "RH",
+                        value: 100,
+                        unit: "%",
+                        maxName: "最大值",
+                        max: 50,
+                        minName: "最小值",
+                        min: 20,
+                        img: icon_humidity,
+                    },
+                    {
+                        id: "co2",
+                        name: "CO2",
+                        code: "CO2",
+                        value: 2600,
+                        unit: "ppm",
+                        maxName: "最大值",
+                        max: 2600,
+                        minName: "最小值",
+                        min: 300,
+                        img: icon_CO2,
+                    },
+                    {
+                        id: "methanal",
+                        name: "甲醛",
+                        code: "HCHO",
+                        value: 0.03,
+                        unit: "mg/m³",
+                        maxName: "最大值",
+                        max: 0.01,
+                        minName: "最小值",
+                        min: 0.07,
+                        img: icon_formaldehyde,
+                    },
+                    {
+                        id: "pm25",
+                        name: "PM2.5",
+                        code: "PM2d5",
+                        value: 120,
+                        unit: "ug/m³",
+                        maxColor: "#C4E34F",
+                        minColor: "#7ed874",
+                        maxName: "最大值",
+                        max: 340,
+                        minName: "最小值",
+                        min: 20,
+                        img: icon_PM2d5,
+                    },
+                ];
+                lastMonthInit.forEach((item) => {
+                    var filterRes = lastMonthData.filter((ele) => {
+                        return ele.code == item.code;
                     });
+                    var filterObj = filterRes[0] || {};
+                    item.value = filterObj.avgData
+                        ? Number(filterObj.avgData.toFixed(1))
+                        : filterObj.avgData;
+                    item.max = filterObj.maxData;
+                    item.min = filterObj.minData;
                 });
-        },
+                return lastMonthInit;
+            },
+        }),
+    },
+    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>

src/views/valueDelivery/NowData.vue

@@ -16,7 +16,7 @@
         </div>
         <div class="subhead-title">主动式空调，会呼吸的写字楼</div>
         <div class="contain">
-            <div class="item" v-for="(item, index) in realData" :key="index">
+            <div class="item" v-for="(item, index) in realDataArr" :key="index">
                 <div class="item_content">
                     <img
                         :class="[screenType === 'hor' ? '' : 'vert']"
@@ -50,7 +50,8 @@ import icon_formaldehyde from "@/assets/icon_formaldehyde.png";
 import icon_PM2d5 from "@/assets/icon_PM2d5.png";
 import { selectColor } from "@/utils/publicMethod";
 
-import { mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
+
 export default {
     props: {
         screenType: {
@@ -61,60 +62,87 @@ export default {
         },
     },
     data() {
-        return {
-            realData: [
-                {
-                    id: "temp",
-                    name: "温度",
-                    img: icon_temp,
-                    value: 24.5,
-                    unit: "℃",
-                    level: "low",
-                },
-                {
-                    id: "humidity",
-                    name: "湿度",
-                    img: icon_humidity,
-                    value: 33,
-                    unit: "%",
-                    level: "middle",
-                },
-                {
-                    id: "co2",
-                    name: "CO2",
-                    img: icon_CO2,
-                    value: 2399,
-                    unit: "ppm",
-                    level: "low",
-                },
-                {
-                    id: "methanal",
-                    name: "甲醛",
-                    img: icon_formaldehyde,
-                    value: 0.12,
-                    unit: "mg/m³",
-                    level: "low",
-                },
-                {
-                    id: "pm25",
-                    name: "PM2.5",
-                    img: icon_PM2d5,
-                    value: 100,
-                    unit: "ug/m³",
-                    level: "low",
-                },
-            ],
-        };
+        return {};
     },
     watch: {
-        "$store.state.realTimeData"(newv, oldv) {
-            this.realData.forEach(function(item) {
-                item.value = newv[item.id];
-            });
+        // "$store.state.realTimeData"(newv, oldv) {
+        //     //debugger;
+        //     this.realData.forEach(function(item) {
+        //         item.value = newv[item.id];
+        //     });
+        // },
+        realDataArr(newv, oldv) {
+           // debugger;
         },
     },
-    created() {
-        //this.getRealTimeData();//实时数据
+    mounted() {
+        // setTimeout(() => {
+        this.getRealTimeData(); //实时数据
+        // }, 20000);
+    },
+    computed: {
+        ...mapState({
+            realDataArr(state) {
+                //debugger;
+                var realTimeData = state.realTimeData;
+                var realInit = [
+                    {
+                        id: "temp",
+                        code: "Tdb",
+                        name: "温度",
+                        img: icon_temp,
+                        //value: 24.5,
+                        unit: "℃",
+                        level: "low",
+                    },
+                    {
+                        id: "humidity",
+                        name: "湿度",
+                        code: "RH",
+                        img: icon_humidity,
+                        // value: 33,
+                        unit: "%",
+                        level: "middle",
+                    },
+                    {
+                        id: "co2",
+                        name: "CO2",
+                        code: "CO2",
+                        img: icon_CO2,
+                        // value: 2399,
+                        unit: "ppm",
+                        level: "low",
+                    },
+                    {
+                        id: "methanal",
+                        code: "HCHO",
+                        name: "甲醛",
+                        img: icon_formaldehyde,
+                        // value: 0.12,
+                        unit: "mg/m³",
+                        level: "low",
+                    },
+                    {
+                        id: "pm25",
+                        code: "PM2d5",
+                        name: "PM2.5",
+                        img: icon_PM2d5,
+                        // value: 100,
+                        unit: "ug/m³",
+                        level: "low",
+                    },
+                ];
+                realInit.forEach((item) => {
+                    var filterRes = realTimeData.filter((ele) => {
+                        return ele.code == item.code;
+                    });
+                    var value = (filterRes[0] || {}).data;
+                    item.value = value ? Number(value.toFixed(1)) : value;
+                });
+
+                return realInit;
+            },
+        }),
     },
     methods: {
         ...mapActions(["getRealTimeData"]),

src/views/verticalScreen.vue

@@ -3,7 +3,7 @@
         <div class="pageHead">
             <pageHead />
         </div>
-        <div style="display:none">
+        <div >
             <NowData screenType="ver" />
             <AirSwitchVer />
             <TemChart screenType="ver" />
@@ -29,7 +29,7 @@
             <lastSaveEnergy screenType="ver" />
             <lastEnergyChart />
         </div>
-        <FloorSpace />
+        <FloorSpace style="display:none" />
     </div>
 </template>
 <script>