大屏修改

package.json

@@ -4,8 +4,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "serve": "vue-cli-service serve ",
+    "build": "vue-cli-service build ",
+    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "@antv/data-set": "^0.10.1",

src/App.vue

@@ -1,38 +1,35 @@
 <template>
-  <div id="app">
-   <router-view ></router-view>
-  </div>
+    <div id="app">
+        <router-view></router-view>
+    </div>
 </template>
 
 <script>
+import { mapActions } from "vuex";
 
 export default {
     data() {
-        return {
-           
-        }
+        return {};
     },
     created() {
-
-    },
-    components:{
-       
+       // this.getAirCondition();//空调数据
     },
+    components: {},
     methods: {
-  
+        ...mapActions(["getAirCondition"]),
     },
-}
+};
 </script>
 
 <style lang="less">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background:#f3fdff;
-//   text-align: center;
-//   color: #2c3e50;
-//   margin-top: 60px;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: #f3fdff;
+    //   text-align: center;
+    //   color: #2c3e50;
+    //   margin-top: 60px;
 }
 @import "/src/assets/css/common.less";
 </style>

src/api/fistpage.ts

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

src/api/index.ts

@@ -0,0 +1,13 @@
+const files = require.context("@/api", true, /.(ts|js)$/);
+// 合并所有的API
+const allApi = files.keys().reduce((con: any, src: string) => {
+    // console.log("con", files(src));
+    // console.log("src", src);
+    if (src.indexOf("index.ts") == -1) {
+       
+        con=Object.assign(con, files(src).default);
+    }
+    return con;
+}, {});
+console.log("con", allApi);
+export default allApi;

src/api/second.ts

@@ -0,0 +1,4 @@
+export default {
+    queryFs: "/object/floor/queryFs", //空调状态
+    queryParam: "/object/floor/queryParam", //上月温度
+};

src/main.ts

@@ -3,14 +3,18 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import axios from './utils/axios';
-
+import api from './api/index';
 
 Vue.prototype.$axios = axios;
-Vue.config.productionTip = false
-import { Button } from 'element-ui';
+Vue.prototype.$api = api;
 
+Vue.config.productionTip = false
+import { Button ,Loading} from 'element-ui';
 
 Vue.use(Button);
+//Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
 
 
 new Vue({

src/router/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '@/views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -13,22 +13,22 @@ const routes: Array<RouteConfig> = [
   {
     path: '/verticalScreen',
     name: 'verticalScreen',
-    component: () => import( '../views/verticalScreen.vue')
+    component: () => import( '@/views/verticalScreen.vue')
   },
   {
     path: '/horizontalScreen',
     name: 'horizontalScreen',
-    component: () => import( '../views/horizontalScreen.vue')
+    component: () => import( '@/views/horizontalScreen.vue')
   },
   {
     path: '/horTwo',
     name: 'horTwo',
-    component: () => import( '../views/horTwo.vue')
+    component: () => import( '@/views/horTwo.vue')
   },
   {
     path: '/horThree',
     name: 'horThree',
-    component: () => import( '../views/horThree.vue')
+    component: () => import( '@/views/horThree.vue')
   },
   
 ]

src/store/index.ts

@@ -1,15 +1,83 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
+import axios from "@/utils/axios";
+import api from "@/api/index";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
+    state: {
+        realTimeData: {}, //实时数据
+        airCondition: {}, //空调情况
+        realTimeTemp: [], //实时温度
+        lastMonthData: {}, //上月数据
+    },
+    mutations: {
+        getRealTimeData(state, data) {
+            state.realTimeData = data;
+        },
+        getAirCondition(state, data) {
+            state.airCondition = data;
+        },
+        getRealTimeTemp(state, data) {
+            state.realTimeTemp = data;
+        },
+        getLastMonthData(state, data) {
+            state.lastMonthData = data;
+        },
+    },
+    actions: {
+        getRealTimeData({ state, commit }, payload) {
+            //实时数据
+            axios
+                .post(api.queryEnvironmentData, {
+                    projectId: "Pj1101080259",
+                })
+                .then((res: any) => {
+                    commit({
+                        type: "getRealTimeData",
+                        data: res,
+                    });
+                });
+        },
+        getAirCondition({ state, commit }, payload) {
+            //空调状态
+            axios
+                .post(api.queryConditionerStatus, {
+                    projectId: "Pj1101080259",
+                })
+                .then((res: any) => {
+                    commit({
+                        type: "getAirCondition",
+                        data: res,
+                    });
+                });
+        },
+        getRealTimeTemp({ state, commit }, payload) {
+            //实时温度
+            axios
+                .post(api.queryIndoorTempList, {
+                    projectId: "Pj1101080259",
+                })
+                .then((res: any) => {
+                    // commit({
+                    //     type: "getRealTimeTemp",
+                    //     data: res,
+                    // });
+                });
+        },
+        getLastMonthData({ state, commit }, payload) {
+            //上月温度
+            axios
+                .post(api.queryLastMonthData, {
+                    projectId: "Pj1101080259",
+                })
+                .then((res: any) => {
+                    commit({
+                        type: "getLastMonthData",
+                        data: res,
+                    });
+                });
+        },
+    },
+});

src/utils/axios.ts

@@ -3,28 +3,28 @@ 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 = "/";
+axios.defaults.baseURL = "/daping/duoduo-service/object-service";
 
 //添加请求拦截器
 axios.interceptors.request.use(
-  (config: any) => {
-//config.data   config.params config.headers
-    return config;
-  },
-  (error: any) => {
-    return Promise.reject(error);
-  }
+    (config: any) => {
+        //config.data   config.params config.headers
+      //  debugger;
+        return config;
+    },
+    (error: any) => {
+        return Promise.reject(error);
+    }
 );
 
 // 添加响应拦截器
 axios.interceptors.response.use(
-  (response: any) => {
-
-    return response;
-  },
-  (error: any) => {
-    return Promise.reject(error);
-  }
+    (response: any) => {
+        return response;
+    },
+    (error: any) => {
+        return Promise.reject(error);
+    }
 );
 
 export default axios;

src/utils/publicMethod.ts

@@ -13,7 +13,7 @@ var selectColor = function(value: any, typestr: string) {
             { min: 28, max: 30, color: "#EE9F2B" },
             { min: 30, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
         ],
-        shidu: [
+        humidity: [
             { min: 0, max: 30, color: "#F5483D" },
             { min: 30, max: 35, color: "#EE9F2B" },
             { min: 35, max: 65, color: "#7ED874" },
@@ -26,7 +26,7 @@ var selectColor = function(value: any, typestr: string) {
             { min: 1000, max: 2500, color: "#EE9F2B" },
             { min: 2500, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
         ],
-        jiaquan: [
+        methanal: [
             { min: 0, max: 0.08, color: "#7ED874" },
             { min: 0.08, max: 0.1, color: "#C4E34F" },
             { min: 0.1, max: 0.2, color: "#EE9F2B" },

src/views/valueDelivery/AirSwitchVer.vue

@@ -2,7 +2,9 @@
     <div class="airSwitch verticalClass">
         <div class="air-title head-title">
             <span>空调实时开关</span>
-            <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
+            <span class="status">{{
+                status ? "空调已开启" : "空调已关闭"
+            }}</span>
         </div>
         <div class="air-cont">
             <div class="air-left">
@@ -11,7 +13,7 @@
                 </div>
                 <div class="air-rate">
                     <span>空调开启率</span>
-                    <span class="air-rate-value">{{value}}%</span>
+                    <span class="air-rate-value">{{ value }}%</span>
                 </div>
             </div>
             <div class="air-bg">
@@ -21,33 +23,43 @@
     </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: "AirSwitch",
     props: {
         status: {
             type: Boolean,
-            default: () => { return false } // 默认开
+            default: () => {
+                return false;
+            }, // 默认开
         },
         value: {
             type: Number,
-            default: () => { return 75 } // 默认开
+            default: () => {
+                return 75;
+            }, // 默认开
         },
+    },
 
+    computed: {
+        ...mapState({
+            airCondition: (state) => state.airCondition,
+        }),
     },
     data() {
         return {
             img: {
                 openImg: air_open,
                 closeImg: air_close,
-            }
-        }
+            },
+        };
     },
-}
+};
 </script>
 <style lang="less" scoped>
-
 .airSwitch {
     height: 250px;
     .air-title {
@@ -114,5 +126,3 @@ export default {
     }
 }
 </style>
-
-

src/views/valueDelivery/FloorSpace.vue

@@ -6,15 +6,20 @@
                     class="eachItem"
                     v-for="item in allIndicator"
                     @click="clickIndicator(item)"
-                    v-bind:class="{'select':item.id==selIndicator.id}"
-                ><span>{{item.name}}</span><span class="bar"></span></div>
+                    v-bind:class="{ select: item.id == selIndicator.id }"
+                >
+                    <span>{{ item.name }}</span
+                    ><span class="bar"></span>
+                </div>
             </div>
             <div class="imageDiv">
                 <img :src="selIndicator.img" />
             </div>
             <div class="textCont">
-                平均<span>{{selIndicator.name}}</span><span class="value">234</span><span>
-                    {{selIndicator.unit}}
+                平均<span>{{ selIndicator.name }}</span
+                ><span class="value">234</span
+                ><span>
+                    {{ selIndicator.unit }}
                 </span>
             </div>
         </div>
@@ -22,95 +27,201 @@
         <div class="floorWrap">
             <div
                 class="floor-item"
-                v-for="(item,index) in floorData"
+                v-for="(item, index) in floorData"
                 :key="index"
             >
-                <div class="floor-num"><span>{{item.floorName}}</span></div>
+                <div class="floor-num">
+                    <span>{{ item.floorName }}</span>
+                </div>
                 <div class="floor-space">
                     <div
                         class="space-box"
-                        v-for="(childItem,id) in item.data"
+                        v-for="(childItem, id) in item.data"
                         :key="id"
                     >
-                        <div class="space-name">{{childItem.name}}</div>
+                        <div class="space-name">{{ childItem.name }}</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
 </template>
 <script>
+import { Loading } from "element-ui";
 export default {
-    name: 'FloorSpace',
+    name: "FloorSpace",
     data() {
         return {
             selIndicator: {},
-            allIndicator: [{
-                id: 'temp',
-                name: '温度',
-                img: require('../../assets/verwendu.png'),
-                unit: '℃'
-            }, {
-                id: 'shidu',
-                name: '湿度',
-                img: require('../../assets/vershidu.png'),
-                unit: '%'
-            }, {
-                id: 'co2',
-                name: 'CO₂',
-                img: require('../../assets/verco2.png'),
-                unit: 'ppm'
-            }, {
-                id: 'jiaquan',
-                name: '甲醛',
-                img: require('../../assets/verjiaquan.png'),
-                unit: 'mg/m³'
-
-            }, {
-                id: 'pm25',
-                name: 'PM2.5',
-                img: require('../../assets/verpm25.png'),
-                unit: 'ug/m³'
-            }],
+            allIndicator: [
+                {
+                    id: "temp",
+                    name: "温度",
+                    img: require("../../assets/verwendu.png"),
+                    unit: "℃",
+                },
+                {
+                    id: "humidity",
+                    name: "湿度",
+                    img: require("../../assets/vershidu.png"),
+                    unit: "%",
+                },
+                {
+                    id: "co2",
+                    name: "CO₂",
+                    img: require("../../assets/verco2.png"),
+                    unit: "ppm",
+                },
+                {
+                    id: "methanal",
+                    name: "甲醛",
+                    img: require("../../assets/verjiaquan.png"),
+                    unit: "mg/m³",
+                },
+                {
+                    id: "pm25",
+                    name: "PM2.5",
+                    img: require("../../assets/verpm25.png"),
+                    unit: "ug/m³",
+                },
+            ],
             floorData: [
                 {
-                    floorName: '8F',
+                    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' },
-                    ]
+                        { 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',
+                    floorName: "7F",
                     data: [
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                    ]
+                        { id: 1, name: "空间1" },
+                        { id: 2, name: "空间2" },
+                        { id: 3, name: "空间3" },
+                    ],
                 },
-            ]
-        }
+            ],
+            firstPageParams: [],
+            secondPageParams: [],
+            nowPage: 1, //当前哪一屏幕
+        };
     },
     mounted() {
         this.selIndicator = this.allIndicator[0];
+        this.queryFs();
     },
     methods: {
         clickIndicator(item) {
             this.selIndicator = item;
-        }
-    }
-}
+        },
+        queryFs() {
+            //let loadingInstance = Loading.service({ fullscreen: true });
+            var loading = this.$loading({ fullscreen: true });
+            this.$axios
+                .post(this.$api.queryFs, {
+                    criteria: {
+                        projectId: "Pj1101020002",
+                    },
+                    size: 14,
+                    page: 1,
+                    orders: [
+                        {
+                            column: "floorSequenceId",
+                            asc: true,
+                        },
+                    ],
+                })
+                .then((res) => {
+                    // loadingInstance.close();
+                    loading.close();
+                    console.log("queryFs", res);
+                    var allFloor = res.data.content || [];
+                    var allFloorNum = allFloor.length;
+                    //如果超过7层 就显示两屏幕 第一屏 firstPageNum
+                    //如果超过7层 就显示两屏幕 第二屏 secondPageNum
+                    var firstPageNum, secondPageNum;
+                    if (allFloorNum <= 7) {
+                        firstPageNum = allFloorNum;
+                        secondPageNum = 0;
+                    } else {
+                        firstPageNum = Math.ceil(allFloorNum / 2);
+                        secondPageNum = Math.floor(allFloorNum / 2);
+                    }
+
+                    //this.nowPage = 1; //取第一屏
+
+                    var firstMaxSpace = this.floorHandle(firstPageNum); //第一屏 一层最多空间
+                    var sendMaxSpace = this.floorHandle(secondPageNum);
+                    var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
+                    var secondPageFloors = allFloor.slice(firstPageNum);
+
+                    this.firstPageParams = firstPageFloors.map((item) => {
+                        var obj = {};
+                        obj.id = item.id;
+                        obj.projectId = "Pj1101020002";
+                        obj.spaceNum = firstMaxSpace;
+                        return obj;
+                    });
+
+                    this.secondPageParams = secondPageFloors.map((item) => {
+                        var obj = {};
+                        obj.id = item.id;
+                        obj.projectId = "Pj1101020002";
+                        obj.spaceNum = sendMaxSpace;
+                        return obj;
+                    });
+                    this.queryParam(this.firstPageParams);
+                });
+        },
+
+        queryParam(param) {
+            var loading = this.$loading({ fullscreen: true });
+            this.$axios.post(this.$api.queryParam, param).then((res) => {
+                loading.close();
+                debugger;
+            });
+        },
+        floorHandle(floorNum) {//返回一层 最多多少房间
+            var maxFloorSpace = 0; //一层 最多显示房间数
+            switch (floorNum) {
+                case 1:
+                    maxFloorSpace = 160;
+                    break;
+                case 2:
+                    maxFloorSpace = 80;
+                    break;
+                case 3:
+                    maxFloorSpace = 50;
+                    break;
+                case 4:
+                    maxFloorSpace = 30;
+                    break;
+                case 5:
+                case 6:
+                case 7:
+                    maxFloorSpace = 20;
+                    break;
+            }
+            return maxFloorSpace;
+        },
+        spaceHandle(spaceNum) {//返回一层 的每一行 几个房间
+            var lineNum = spaceNum; //一行的房间数
+            var floorline = Math.ceil(spaceNum / 10); //20-30 3排 30-40个 4排 所以一排10个
+            lineNum = Math.ceil(spaceNum / floorline);
+        },
+    },
+};
 </script>
 <style lang="less" scoped>
 .topChange {
@@ -186,12 +297,12 @@ export default {
         line-height: 43px;
         color: #3b3558;
         width: 80px;
-        flex-shrink:0;
+        flex-shrink: 0;
     }
     .floor-space {
         display: flex;
         flex: 1;
-        flex-wrap:  wrap ;
+        flex-wrap: wrap;
         .space-box {
             padding: 4px;
             .space-name {
@@ -207,5 +318,3 @@ export default {
     }
 }
 </style>
-
-

src/views/valueDelivery/HorAirSwitch.vue

@@ -3,46 +3,54 @@
         <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: !status }">
+            <span>{{ status ? "空调已开启" : "空调已关闭" }}</span>
         </div>
-        <div class="air-bg" >
+        <div class="air-bg">
             <img :src="[status ? img.openImg : img.closeImg]" />
         </div>
         <div class="air-rate">
             <span>空调开启率</span>
-            <span class="air-rate-value">{{value}}%</span>
+            <span class="air-rate-value">{{ value }}%</span>
         </div>
     </div>
 </template>
 <script>
-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 air_close from "@/assets/horImg/air_close.png";
+import {mapState} from 'vuex';
 export default {
     name: "AirSwitch",
     props: {
         status: {
             type: Boolean,
-            default: () => { return false } // 默认开
+            default: () => {
+                return false;
+            }, // 默认开
         },
         value: {
             type: Number,
-            default: () => { return 75 } // 默认开
+            default: () => {
+                return 75;
+            }, // 默认开
         },
-
+    },
+    computed: {
+        ...mapState({
+            airCondition: (state) => state.airCondition,
+        }),
     },
     data() {
         return {
             img: {
                 openImg: air_open,
                 closeImg: air_close,
-            }
-        }
+            },
+        };
     },
-}
+};
 </script>
 <style lang="less" scoped>
-
 .airSwitch {
     height: 388px;
     // width: 446px;
@@ -83,5 +91,3 @@ export default {
     }
 }
 </style>
-
-

src/views/valueDelivery/HorFloorSpace.vue

@@ -71,7 +71,7 @@ export default {
                 img: require('../../assets/horImg/wendu.png'),
                 unit: '℃'
             }, {
-                id: 'shidu',
+                id: 'humidity',
                 name: '湿度',
                 img: require('../../assets/horImg/shidu.png'),
                 unit: '%'
@@ -81,7 +81,7 @@ export default {
                 img: require('../../assets/horImg/co2.png'),
                 unit: 'ppm'
             }, {
-                id: 'jiaquan',
+                id: 'methanal',
                 name: '甲醛',
                 img: require('../../assets/horImg/jiaquan.png'),
                 unit: 'mg/m³'
@@ -118,7 +118,10 @@ export default {
                         { id: 3, name: '空间3' },
                     ]
                 },
-            ]
+            ],
+            firstPageParams: [],
+            secondPageParams: [],
+            nowPage: 1, //当前哪一屏幕
         }
     },
     mounted() {
@@ -128,35 +131,123 @@ export default {
         clickIndicator(item) {
             this.selIndicator = item;
         },
-        floorHandle(floorNum, spaceNum) {
-            var lineNum = spaceNum;//一行的房间数
-            var maxFloorSpace = 0;//一层 最多显示房间数
-            if (floorNum == 1) {
-                if (spaceNum > 2 && spaceNum < = 24 ) {
+        queryFs() {
+            //let loadingInstance = Loading.service({ fullscreen: true });
+            var loading = this.$loading({ fullscreen: true });
+            this.$axios
+                .post(this.$api.queryFs, {
+                    criteria: {
+                        projectId: "Pj1101020002",
+                    },
+                    size: 14,
+                    page: 1,
+                    orders: [
+                        {
+                            column: "floorSequenceId",
+                            asc: true,
+                        },
+                    ],
+                })
+                .then((res) => {
+                    // loadingInstance.close();
+                    loading.close();
+                    console.log("queryFs", res);
+                    var allFloor = res.data.content || [];
+                    var allFloorNum = allFloor.length;
+                    //如果超过7层 就显示两屏幕 第一屏 firstPageNum
+                    //如果超过7层 就显示两屏幕 第二屏 secondPageNum
+                    var firstPageNum, secondPageNum;
+                    if (allFloorNum <= 7) {
+                        firstPageNum = allFloorNum;
+                        secondPageNum = 0;
+                    } else {
+                        firstPageNum = Math.ceil(allFloorNum / 2);
+                        secondPageNum = Math.floor(allFloorNum / 2);
+                    }
+
+                    //this.nowPage = 1; //取第一屏
+
+                    var firstMaxSpace = this.floorHandle(firstPageNum); //第一屏 一层最多空间
+                    var sendMaxSpace = this.floorHandle(secondPageNum);
+                    var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
+                    var secondPageFloors = allFloor.slice(firstPageNum);
+
+                    this.firstPageParams = firstPageFloors.map((item) => {
+                        var obj = {};
+                        obj.id = item.id;
+                        obj.projectId = "Pj1101020002";
+                        obj.spaceNum = firstMaxSpace;
+                        return obj;
+                    });
+
+                    this.secondPageParams = secondPageFloors.map((item) => {
+                        var obj = {};
+                        obj.id = item.id;
+                        obj.projectId = "Pj1101020002";
+                        obj.spaceNum = sendMaxSpace;
+                        return obj;
+                    });
+                    this.queryParam(this.firstPageParams);
+                });
+        },
+        queryParam(param) {
+            var loading = this.$loading({ fullscreen: true });
+            this.$axios.post(this.$api.queryParam, param).then((res) => {
+                loading.close();
+                debugger;
+            });
+        },
+        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) {
+                } else if (spaceNum > 48 && spaceNum <= 60) {//48-60个 5行
                     lineNum = Math.ceil(spaceNum / 5);
                 }
-                maxFloorSpace=60;
-        }
-         if(floorNum == 2) {
-            if (spaceNum > 16 && spaceNum < = 32 ) {
-                lineNum = Math.ceil(spaceNum / 2);
-            }else if (spaceNum > 32 && spaceNum < = 48 ) {
-                lineNum = Math.ceil(spaceNum / 3);
+            }else{
+                var floorline = Math.ceil(spaceNum / 16); //20-30 3排 30-40个 4排 一层排数
+                lineNum = Math.ceil(spaceNum / floorline);
             }
-            maxFloorSpace=48;
-        }
-        if(floorNum ==3||floorNum ==5) {
-                    if (spaceNum > 16 && spaceNum < = 32 ) {
-                        lineNum = Math.ceil(spaceNum / 2);
-                    }
-                     maxFloorSpace=32;
-                }
+        },
+        floorHandle(floorNum, spaceNum) {
+            var lineNum = spaceNum;//一行的房间数
+            var maxFloorSpace = 0;//一层 最多显示房间数
+              switch (floorNum) {
+                case 1:
+                    maxFloorSpace = 60;
+                    break;
+                case 2:
+                    maxFloorSpace = 48;
+                    break;
+                case 3:
+                case 4:
+                    maxFloorSpace = 32;
+                    break;
+                case 5:
+                case 6:
+                case 7:
+                    maxFloorSpace = 16;
+                    break;
+            }
+   
+        //  if(floorNum == 2) {
+        //     if (spaceNum > 16 && spaceNum < = 32 ) {
+        //         lineNum = Math.ceil(spaceNum / 2);
+        //     }else if (spaceNum > 32 && spaceNum < = 48 ) {
+        //         lineNum = Math.ceil(spaceNum / 3);
+        //     }
+        //     maxFloorSpace=48;
+        // }
+        // if(floorNum ==3||floorNum ==4) {
+        //             if (spaceNum > 16 && spaceNum < = 32 ) {
+        //                 lineNum = Math.ceil(spaceNum / 2);
+        //             }
+        //              maxFloorSpace=32;
+        //         }
     }
 }
 }

src/views/valueDelivery/LastMonthData.vue

@@ -1,13 +1,17 @@
 <template>
     <div
         class="lastMonth"
-        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalLastMonth' ]"
+        :class="[
+            screenType === 'hor'
+                ? 'horizontalClass'
+                : 'verticalClass verticalLastMonth',
+        ]"
     >
         <div class="head-title"><span>上月数据</span></div>
         <div class="itemWrap">
             <div
                 class="item"
-                v-for="(item,index) in lastMonthData"
+                v-for="(item, index) in lastMonthData"
                 :key="index"
             >
                 <div class="item-left">
@@ -15,36 +19,53 @@
                 </div>
                 <div class="item-right">
                     <div class="item-value">
-                        <span>{{item.value}}</span><span>{{item.unit}}</span>
+                        <span>{{ item.value }}</span
+                        ><span>{{ item.unit }}</span>
                     </div>
                     <div class="item-content">
                         <div class="item-content-left">
                             <span
                                 class="max-value maxmin-level"
-                                :style="{backgroundColor: selectColor(item.max,item.id)}"
+                                :style="{
+                                    backgroundColor: selectColor(
+                                        item.max,
+                                        item.id
+                                    ),
+                                }"
                             ></span>
                             <span
                                 class="max-min-line"
-                                :style="{ background: 'linear-gradient('+selectColor(item.max,item.id)+',' +selectColor(item.min,item.id)+')' }"
+                                :style="{
+                                    background:
+                                        'linear-gradient(' +
+                                        selectColor(item.max, item.id) +
+                                        ',' +
+                                        selectColor(item.min, item.id) +
+                                        ')',
+                                }"
                             ></span>
                             <span
                                 class="min-value maxmin-level"
-                                :style="{backgroundColor: selectColor(item.min,item.id)}"
+                                :style="{
+                                    backgroundColor: selectColor(
+                                        item.min,
+                                        item.id
+                                    ),
+                                }"
                             ></span>
                         </div>
                         <div class="item-content-right">
                             <div class="max">
-                                <span>{{item.maxName}}</span>
-                                <span>{{item.max}}</span>
-                                <span>{{item.unit}}</span>
+                                <span>{{ item.maxName }}</span>
+                                <span>{{ item.max }}</span>
+                                <span>{{ item.unit }}</span>
                             </div>
                             <div class="min">
-                                <span>{{item.minName}}</span>
-                                <span>{{item.min}}</span>
-                                <span>{{item.unit}}</span>
+                                <span>{{ item.minName }}</span>
+                                <span>{{ item.min }}</span>
+                                <span>{{ item.unit }}</span>
                             </div>
                         </div>
-
                     </div>
                 </div>
             </div>
@@ -52,41 +73,113 @@
     </div>
 </template>
 <script>
-import icon_temp from '@/assets/icon_temp.png'
-import icon_humidity from '@/assets/icon_humidity.png'
-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 icon_temp from "@/assets/icon_temp.png";
+import icon_humidity from "@/assets/icon_humidity.png";
+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";
 export default {
-    name: 'lastMonthData',
+    name: "lastMonthData",
     props: {
         screenType: {
             type: String,
-            default: () => { return 'hor' } //hor 横屏  vert 竖屏
-        }
+            default: () => {
+                return "hor";
+            }, //hor 横屏  vert 竖屏
+        },
     },
     data() {
         return {
             lastMonthData: [
-                { id: 'temp', name: "温度", value: 24.5, unit: "℃", maxName: '最高温', max: 37, minName: "最低温", min: 24, img: icon_temp },
-                { id: 'shidu', 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: 'jiaquan', 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 },
-            ]
-        }
+                {
+                    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,
+                },
+            ],
+        };
+    },
+    created() {
+        //this.getLastMonthData();
     },
     methods: {
+        //...mapActions(['getLastMonthData']),
         // linearGraient(start,end){
         //     return {
         //         "border-image":linear-gradient(start,end) 0 18
         //     }
         // }
-        selectColor: selectColor
+        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"];
+                    });
+                });
+        },
     },
-}
+};
 </script>
 <style lang="less" scoped>
 .lastMonth {
@@ -162,6 +255,3 @@ export default {
     }
 }
 </style>
-
-
-

src/views/valueDelivery/NowData.vue

@@ -1,7 +1,11 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalNowData' ]"
+        :class="[
+            screenType === 'hor'
+                ? 'horizontalClass'
+                : 'verticalClass verticalNowData',
+        ]"
     >
         <div class="head-title">
             <span>实时数据</span>
@@ -12,68 +16,111 @@
         </div>
         <div class="subhead-title">主动式空调，会呼吸的写字楼</div>
         <div class="contain">
-            <div
-                class="item"
-                v-for="(item, index) in horScreenImg"
-                :key="index"
-            >
+            <div class="item" v-for="(item, index) in realData" :key="index">
                 <div class="item_content">
                     <img
-                        :class="[screenType==='hor' ? '' : 'vert' ]"
+                        :class="[screenType === 'hor' ? '' : 'vert']"
                         :src="item.img"
                         alt=""
-                    >
+                    />
                     <div class="content_value">
-                        <span>{{item.value}}</span><span>{{item.unit}}</span>
+                        <span>{{ item.value }}</span
+                        ><span>{{ item.unit }}</span>
                     </div>
                     <div class="content_name">
-                        <span>{{item.name}}</span>
+                        <span>{{ item.name }}</span>
                     </div>
                     <div
                         class="content_level"
-                        :style="{backgroundColor: selectColor(item.value,item.id)}"
+                        :style="{
+                            backgroundColor: selectColor(item.value, item.id),
+                        }"
                         :class="item.level"
-                    >
-                    </div>
+                    ></div>
                 </div>
-
             </div>
         </div>
-
     </div>
 </template>
 <script>
-import icon_temp from '@/assets/icon_temp.png'
-import icon_humidity from '@/assets/icon_humidity.png'
-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 icon_temp from "@/assets/icon_temp.png";
+import icon_humidity from "@/assets/icon_humidity.png";
+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";
 export default {
     props: {
         screenType: {
             type: String,
-            default: () => { return 'hor' } //hor 横屏  vert 竖屏
-        }
+            default: () => {
+                return "hor";
+            }, //hor 横屏  vert 竖屏
+        },
     },
     data() {
         return {
-            horScreenImg: [
-                { id: 'temp', name: '温度', img: icon_temp, value: 24.5, unit: '℃', level: 'low' },
-                { id: 'shidu', name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
-                { id: 'co2', name: 'CO2', img: icon_CO2, value: 2399, unit: 'ppm', level: 'low' },
-                { id: 'jiaquan', 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' }
-            ]
-        }
+            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",
+                },
+            ],
+        };
     },
-    mounted() {
-        console.log("selectColor", selectColor);
+    watch: {
+        "$store.state.realTimeData"(newv, oldv) {
+            this.realData.forEach(function(item) {
+                item.value = newv[item.id];
+            });
+        },
+    },
+    created() {
+        //this.getRealTimeData();//实时数据
     },
     methods: {
-        selectColor: selectColor
-    }
-}
+        ...mapActions(["getRealTimeData"]),
+        selectColor: selectColor,
+    },
+};
 </script>
 <style lang="less" scoped>
 .NowData {
@@ -167,5 +214,3 @@ export default {
     }
 }
 </style>
-
-

src/views/valueDelivery/TemChart.vue

@@ -17,7 +17,7 @@
 </template>
 <script>
 import G2 from '@antv/g2';
-
+import {mapActions} from "vuex"
 export default {
     name: "TemChart",
     props: {
@@ -28,9 +28,11 @@ export default {
     },
     created() {
         console.log("created");
+
     },
     mounted() {
         console.log("mounted");
+        //this.getRealTimeTemp();
         this.cInitChart();
     },
     data() {
@@ -39,18 +41,19 @@ export default {
         }
     },
     methods: {
+        ...mapActions(['getRealTimeTemp']),
         cInitChart() {
             var data = [
-                { Date: '8', type: '订阅数', value: 23.5 },
-                { Date: '9', type: '订阅数', value: 26.5 },
-                { Date: '10', type: '订阅数', value: 29.5 },
-                { Date: '11', type: '订阅数', value: 30.5 },
-                { Date: '12', type: '订阅数', value: 26.5 },
-                { Date: '13', type: '订阅数', value: 29.5 },
-                { Date: '14', type: '订阅数', value: 30.5 },
-                { Date: '15', type: '订阅数', value: 33.5 },
-                { Date: '16', type: '订阅数', value: 34.5 },
-                { Date: '17', type: '订阅数', value: 30.5 },
+                { 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',
@@ -60,13 +63,13 @@ export default {
             });
             chart.source(data);
 
-            chart.scale('Date', {
+            chart.scale('time', {
                 //range: [0, 1],
                 //tickCount: 2,
                 //tickInterval
                 // type: 'timeCat'
             });
-            chart.scale('value', {
+            chart.scale('temp', {
                 //range: [0, 1],
                 tickCount: 5,
                 minTickInterval:2,
@@ -74,7 +77,7 @@ export default {
                 //tickInterval
                 // type: 'timeCat'
             });
-            chart.axis('Date', {
+            chart.axis('time', {
                 line: {
                     lineWidth: 1, // 设置线的宽度
                     stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
@@ -88,7 +91,7 @@ export default {
                 },
                 tickLine: null
             });
-            chart.axis('value', {
+            chart.axis('temp', {
                 tickLine: null,
                 label: {
                     textStyle: {
@@ -108,19 +111,19 @@ export default {
             // var view1 = chart.view();
             // view1.source(dv2);
             // view1.axis(false);
-            // view1.area().position('Date*value').color('#8d8d8d').opacity(0.1).tooltip(false);
+            // view1.area().position('time*temp').color('#8d8d8d').opacity(0.1).tooltip(false);
             //view1
             //var view1 = chart.view();
 
-            chart.line().position('Date*value').color('#23CCF9').opacity(1).shape('smooth').style({
+            chart.line().position('time*temp').color('#23CCF9').opacity(1).shape('smooth').style({
                 lineWidth: 3,
 
             });
-            chart.point().position('Date*value').color('#23CCF9').opacity(1).shape('circle').style({
+            chart.point().position('time*temp').color('#23CCF9').opacity(1).shape('circle').style({
                 lineWidth: 1,
                 stroke: '#ffffff',
             });
-            chart.area().position('Date*value').color('l(90) 0:#23CCF9 1:#ffffff').opacity(0.2).tooltip(false).shape('smooth');
+            chart.area().position('time*temp').color('l(90) 0:#23CCF9 1:#ffffff').opacity(0.2).tooltip(false).shape('smooth');
 
             chart.guide().text({
                 top: false,
@@ -161,7 +164,7 @@ export default {
 <style lang="less" scoped>
 
 .horizontalClass{
-    width:1036px;
+    // width:1036px;
     height: 388px;
 }
 .temChart {

src/views/verticalScreen.vue

@@ -3,50 +3,60 @@
         <div class="pageHead">
             <pageHead />
         </div>
-
-        <NowData screenType="ver" />
-        <AirSwitchVer />
-        <TemChart screenType="ver" />
-        <LastMonthData screenType="ver" />
-        <div class="lastTotalEnergy verticalClass">
-            <div class="head-title">
-                <span>上月总能耗</span>
-            </div>
-            <div class="subhead-title">低能耗亲自然</div>
-            <div class="bottomCont">
-                <img src='@/assets/circleEnergy.png' />
-                <div class="showData">
-                    <div class="title">比基准能耗</div>
-                    <div class="energySave">节能<span>50%</span></div>
-                    <div class="totalEnergy">总能耗<span>25541</span>KWh</div>
+        <div style="display:none">
+            <NowData screenType="ver" />
+            <AirSwitchVer />
+            <TemChart screenType="ver" />
+            <LastMonthData screenType="ver" />
+        </div>
+        <div style="display:none">
+            <div class="lastTotalEnergy verticalClass">
+                <div class="head-title">
+                    <span>上月总能耗</span>
+                </div>
+                <div class="subhead-title">低能耗亲自然</div>
+                <div class="bottomCont">
+                    <img src="@/assets/circleEnergy.png" />
+                    <div class="showData">
+                        <div class="title">比基准能耗</div>
+                        <div class="energySave">节能<span>50%</span></div>
+                        <div class="totalEnergy">
+                            总能耗<span>25541</span>KWh
+                        </div>
+                    </div>
                 </div>
             </div>
+            <lastSaveEnergy screenType="ver" />
+            <lastEnergyChart />
         </div>
-        <lastSaveEnergy screenType="ver" />
-        <lastEnergyChart />
-
         <FloorSpace />
-
     </div>
 </template>
 <script>
-import NowData from './valueDelivery/NowData.vue'
-import LastMonthData from './valueDelivery/LastMonthData.vue'
-import AirSwitchVer from './valueDelivery/AirSwitchVer.vue'
-import FloorSpace from './valueDelivery/FloorSpace.vue'
-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 NowData from "./valueDelivery/NowData.vue";
+import LastMonthData from "./valueDelivery/LastMonthData.vue";
+import AirSwitchVer from "./valueDelivery/AirSwitchVer.vue";
+import FloorSpace from "./valueDelivery/FloorSpace.vue";
+import TemChart from "./valueDelivery/TemChart.vue";
+import lastEnergyChart from "./valueDelivery/lastEnergyChart.vue";
+import lastSaveEnergy from "./valueDelivery/lastSaveEnergy.vue";
+import pageHead from "./valueDelivery/pageHead.vue";
 
 export default {
-    components: { NowData, FloorSpace, LastMonthData, AirSwitchVer, TemChart, lastEnergyChart, lastSaveEnergy, pageHead },
+    components: {
+        NowData,
+        FloorSpace,
+        LastMonthData,
+        AirSwitchVer,
+        TemChart,
+        lastEnergyChart,
+        lastSaveEnergy,
+        pageHead,
+    },
     data() {
-        return {
-
-        }
-    }
-}
+        return {};
+    },
+};
 </script>
 <style lang="less" scoped>
 @import "/src/assets/css/common.less";
@@ -98,5 +108,3 @@ export default {
     }
 }
 </style>
-
-

vue.config.js

@@ -1,18 +1,32 @@
-const {
-    name,
-} = require('./package.json');
+const { name } = require("./package.json");
+let env = process.env.NODE_ENV.toString();
+console.log('env2',env);
 
 module.exports = {
     publicPath: `/sagadaping`, //相对路径
     outputDir: name, //打包名称
-    assetsDir: 'static', //静态目录
+    assetsDir: "static", //静态目录
     lintOnSave: false, //关闭lint代码
     productionSourceMap: false, // 生产环境是否开启sourceMap
     // 配置跨域
     devServer: {
         port: 8080, // 服务端口
-        https: false,
-        hotOnly: false,
-    
-    }
-}
+        //https: false,
+        //hotOnly: false,
+        proxy: {
+            "/daping": {
+               // http://api.sagacloud.cn/duoduo-service/object-service/object/floor/queryFs
+                 target: 'http://api.sagacloud.cn', // 接 口环境
+                // 'target': 'http://192.168.100.236:9910', // 开发环境
+                // target: 'http://test.persagy.com', // 测试环境
+                changeOrigin: true,
+                //logLevel: "debug",
+                pathRewrite: {
+                     '^/daping': 'http://api.sagacloud.cn', // 接口环境
+                    // '^/api': 'http://192.168.100.236:9910', // 开发环境
+                    // '^/api': 'http://test.persagy.com/api' // 测试环境
+                },
+            },
+        },
+    },
+};