Kaynağa Gözat

世茂接口数据手动库修改

wangtao 2 yıl önce
ebeveyn
işleme
90a7401eae

+ 0 - 1
src/App.vue

@@ -26,7 +26,6 @@ export default {
 
     window.addEventListener("resize", () => {
       this.resize_window();
-      console.log(this.scalesNum)
     });
   },
   methods: {

+ 11 - 4
src/components2/cnergyConsumptionStatistics/index.vue

@@ -5,7 +5,7 @@
       <el-image :src="cnergyConsumption" fit="scale-down" />
       <el-col class="name"
         >当日耗能<el-col class="num"
-          >88<span class="unit">kw · h</span></el-col
+          >{{ data.dangri }}<span class="unit">kw · h</span></el-col
         ></el-col
       >
     </el-col>
@@ -13,7 +13,7 @@
       <el-image :src="cnergyConsumption" fit="scale-down" />
       <el-col class="name"
         >当月耗能<el-col class="num"
-          >1725<span class="unit">kw · h</span></el-col
+          >{{ data.dangyue }}<span class="unit">kw · h</span></el-col
         ></el-col
       >
     </el-col>
@@ -21,7 +21,7 @@
       <el-image :src="cnergyConsumption" fit="scale-down" />
       <el-col class="name"
         >昨日耗能<el-col class="num"
-          >115<span class="unit">kw · h</span></el-col
+          >{{ data.zuori }}<span class="unit">kw · h</span></el-col
         ></el-col
       >
     </el-col>
@@ -29,7 +29,7 @@
       <el-image :src="cnergyConsumption" fit="scale-down" />
       <el-col class="name"
         >上月耗能<el-col class="num"
-          >3671<span class="unit">kw · h</span></el-col
+          >{{ data.shangyu }}<span class="unit">kw · h</span></el-col
         ></el-col
       >
     </el-col>
@@ -39,11 +39,18 @@
 import cnergyConsumption from "@/assets/images2/能耗统计icon.png";
 export default {
   name: "cnergyConsumptionStatistics",
+  props:["resInfo"],
   data() {
     return {
       cnergyConsumption: cnergyConsumption,
+      data:{},
     };
   },
+  watch:{
+    resInfo(val,old){
+      this.data = val
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

+ 9 - 2
src/components2/conferenceRoomStatistics/index.vue

@@ -17,7 +17,7 @@
     </el-col>
     <div :span="12" style="position: relative;;z-index:10;top:0px;">
       <p class="titleHy">会议室昨日使用情况</p>
-      <pie :resData="data" style="margin-top:-10%"/>
+      <pie :resData="data2.pie" style="margin-top:-10%"/>
     </div>
   </el-col>
 </template>
@@ -27,6 +27,7 @@ import conferenceRoom from "@/assets/images2/会议室统计icon.png";
 import pie from "@/components2/conferenceRoomStatistics/pie.vue";
 export default {
   name: "conferenceRoomStatistics",
+  props:["resInfo"],
   components: {
   	pie,
   },
@@ -38,9 +39,15 @@ export default {
         attendeeIsSign: undefined,
         attendeeTotal: undefined,
         roomTotal: undefined
-      }
+      },
+      data2:{}
     };
   },
+  watch:{
+    resInfo(val,old){
+      this.data2 = val
+    }
+  },
   mounted() {
     this.init()
     this.timing()

+ 7 - 11
src/components2/conferenceRoomStatistics/pie.vue

@@ -12,15 +12,14 @@ export default {
   props: ["resData"],
   data() {
     return {
+      data:[]
     };
   },
   watch: {
-    resData() {
-      this.getData();
-    },
-  },
-  mounted() {
-    this.getData();
+    resData(val,old){
+      this.data = val
+      this.getData()
+    }
   },
   methods: {
     getData() {
@@ -32,7 +31,7 @@ export default {
         ],
         title: {
           //text: data.attendeeIsSign,
-          text: '0.46%',
+          text: this.data[0].value + '%',
           textStyle: {
             color: '#E6EFFF',
             fontSize: 25
@@ -76,10 +75,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 0.46, name: '使用时长' },
-              { value: 99.54, name: '未使用时长' },
-            ]
+            data: this.data
           }
         ]
       };

+ 12 - 4
src/components2/parkingSpace/index.vue

@@ -5,21 +5,21 @@
       <el-col class="rowN">
         <el-image :src="car" fit="scale-down" />
         <el-col class="name">车位总数</el-col>
-        <el-col class="num">160<span> 个</span></el-col>
+        <el-col class="num">{{data.zongshu}}<span> 个</span></el-col>
       </el-col>
       <el-col class="rowN">
         <el-image :src="car" fit="scale-down" />
         <el-col class="name">已停车位</el-col>
-        <el-col class="num">32<span> 个</span></el-col>
+        <el-col class="num">{{data.zongshu - data.shengyu}}<span> 个</span></el-col>
       </el-col>
       <el-col class="rowN">
         <el-image :src="car" fit="scale-down" />
         <el-col class="name">剩余车位</el-col>
-        <el-col class="num">128<span> 个</span></el-col>
+        <el-col class="num">{{data.shengyu}}<span> 个</span></el-col>
       </el-col>
     </el-col>
     <el-col class="parkingSpaceRight">
-      <el-col class="num">39<span> 辆/次</span></el-col>
+      <el-col class="num">{{data.churu}}<span> 辆/次</span></el-col>
       <el-col class="name">今日出入车辆</el-col>
     </el-col>
   </el-col>
@@ -29,15 +29,23 @@ import axios from 'axios'
 import car from "@/assets/images2/汽车位统计icon.png";
 export default {
   name: "parkingSpace",
+  props:["resInfo"],
   data() {
     return {
       car: car,
+      data:{}
     };
   },
+  watch:{
+    resInfo(val,old){
+      this.data = val
+    }
+  },
   mounted() {
     //this.init()
   },
   methods: {
+
     init(){
       axios({
         method: 'get',

+ 0 - 217
src/components2/pie1/index.vue

@@ -1,217 +0,0 @@
-<template>
-  <el-row>
-    <div id="pie1" style="width:100%;height:100%;"></div>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  props: ["resData"],
-  data() {
-    return {};
-  },
-  watch: {
-    resData() {
-      this.getData();
-    }
-  },
-  methods: {
-    getData() {
-      let data = this.resData
-      let myChart = echarts.init(document.getElementById("pie1"));
-      let total = 0
-      data.forEach(val => {
-        total += val.value;
-      });
-
-      let BorderWidth = '6';
-    //反方向剩下部分的样式
-    let placeHolderStyle = {
-        normal: {
-            label: {
-                show: false,
-                position: "center"
-            },
-            labelLine: {
-                show: false
-            },
-            color: "#3A4154",
-            borderColor: "#3A4154",
-            borderWidth: 6
-        },
-        emphasis: {
-            color: "#dedede",
-            borderColor: "#dedede",
-            borderWidth: 0
-        }
-    }
-let option = {
-     tooltip: {
-          trigger: 'item',
-          formatter:function (params){
-              return`${params.name}${params.value} <br/> 占比%`
-                        }
-        },
-        color: ['#7B79FF', '#FFB0E2', '#59CFFF'],
-  
-        series: [{
-            name: '入厕人数',
-            type: 'pie',
-            clockWise: true, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            radius: ['95%', '96%'],
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: false,
-                        position: 'outside'
-                    },
-                    labelLine: {
-                        show: false,
-                        length: 100,
-                        smooth: 0.5
-                    },
-                    borderWidth: BorderWidth,
-                    shadowBlur: 40,
-                    borderColor: "#7B79FF",
-                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-                }
-            },
-            data: [{
-                value: 7,
-                name: '入厕人数'
-            },
-             {
-                value: 3,
-                name: '',
-                itemStyle: placeHolderStyle
-            }
-            ]
-        }, {
-            name: '就餐人数',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['85%', '86%'],
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: false
-                    },
-                    labelLine: {
-                        show: false,
-                        length: 100,
-                        smooth: 0.5
-                    },
-                    borderWidth: BorderWidth,
-                    shadowBlur: 40,
-                    borderColor: "#FFB0E2",
-                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-                }
-            },
-            data: [{
-                value: 6,
-                name: '就餐人数'
-            }, 
-            {
-                value: 4,
-                name: '',
-                itemStyle: placeHolderStyle
-            }
-            ]
-        },  {
-            name: '购物人数',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['75%', '76%'],
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: false
-                    },
-                    labelLine: {
-                        show: false,
-                        length: 100,
-                        smooth: 0.5
-                    },
-                    borderWidth: BorderWidth,
-                    shadowBlur: 40,
-                    borderColor: "#59CFFF",
-                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-                }
-            },
-            data: [{
-                value: 5,
-                name: '购物人数'
-            }, 
-            {
-                value: 5,
-                name: '',
-                itemStyle: placeHolderStyle
-            }
-            ]
-        }]
-
-
-};
-    //   let option = {
-    //     title: [
-    //       {
-           
-    //         top: "center",
-    //         left: "center",
-    //         textStyle: {
-    //           rich: {
-    //             name: {
-    //               fontSize: 25,
-    //               fontWeight: "normal",
-    //               color: "#37FF01"
-    //             },
-    //             val: {
-    //               fontSize: 14,
-    //               fontWeight: "bold",
-    //               color: "#02DDF2"
-    //             }
-    //           }
-    //         }
-    //       }
-    //     ],
-    //     tooltip: {
-    //       trigger: "item",
-    //       formatter: function(params) {
-    //         return (data[1].value / total).toFixed(2)
-    //       }
-    //     },
-    //     series: [
-    //       {
-    //         label: {
-    //           normal: {
-    //             show: true,
-    //             formatter: " {b}:{c} "
-    //           },
-    //           emphasis: {
-    //             show: true
-    //           }
-    //         },
-    //         name: "访问来源",
-    //         radius: ["45%", "60%"],
-    //         type: "pie", // 设置图表类型为饼图
-    //         // data: []
-    //         data: data
-    //       }
-    //     ],
-    //     color: ['#FF0087', '#00DDFF', '#37A2FF', '#FF5801', '#FFBF00']
-    //   };
-      option && myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-
-    },
-
-  }
-};
-</script>
-

+ 29 - 23
src/components2/restaurant/index.vue

@@ -5,7 +5,7 @@
       <el-col :span="24" class="nh">
         <el-image :src="restaurant1" fit="scale-down" />
         <el-col class="name">今日营业额
-          <el-col class="num">0<span class="unit">元</span></el-col>
+          <el-col class="num">{{ data2.yingyee }}<span class="unit">元</span></el-col>
         </el-col>
         <!-- <el-col class="name"
           >今日营业额<el-col class="num"
@@ -17,7 +17,7 @@
         <el-image :src="restaurant1" fit="scale-down" />
         <el-col class="name"
           >今日销售人/次<el-col class="num"
-            >0<span class="unit"></span></el-col
+            >{{ data2.renci }}<span class="unit"></span></el-col
           ></el-col
         >
         <!-- <el-col class="name"
@@ -34,14 +34,10 @@
         <el-image :src="restaurant3" fit="scale-down" class="rightImg" />
       </el-col>
       <el-col class="bottom">
-        <div class="dish" v-for="(item,index) in data.countTheTopThree" :key="index">
+        <div class="dish" v-for="(item,index) in data2.zuori" :key="index">
           <el-col :span="5"><el-image :src="item.img" fit="scale-down" class="leftImg iconCP"/></el-col>
           <el-col :span="11" class="dishName">{{item.name}}</el-col>
           <el-col :span="8" class="fs">{{item.countPid}}份</el-col>
-
-          <!-- <el-col :span="5"><el-image :src="item.img" fit="scale-down" class="leftImg iconCP"/></el-col>
-          <el-col :span="11" class="dishName">{{item.name}}</el-col>
-          <el-col :span="8" class="fs">{{item.countPid}}份</el-col> -->
         </div>
       </el-col>
     </el-col>
@@ -58,6 +54,7 @@ import num3 from "@/assets/images2/第三名icon.png";
 import { getWeekDate } from "@/assets/js/dataFormate.js";
 export default {
   name: "restaurant",
+  props:["resInfo"],
   data() {
     return {
       loading:false,
@@ -77,27 +74,36 @@ export default {
           // {img:num2,name:"雪菜老豆腐",countPid:403},
           // {img:num3,name:"碎肉粉",countPid:395}
 
-          {img:num1,name:"未营业",countPid:0},
-          {img:num2,name:"未营业",countPid:0},
-          {img:num3,name:"未营业",countPid:0},
+          {img:num1,name:"米饭",countPid:305},
+          {img:num2,name:"西红柿炒蛋",countPid:236},
+          {img:num3,name:"鱼香肉丝",countPid:158},
         ]
       },
+      data2:{}
     };
   },
-  created(){
-    if(getWeekDate() == "周一" || getWeekDate() == "周日"){
-      this.list2 = [
-        {id:num1,name:"未营业",num:0},
-        {id:num2,name:"未营业",num:0},
-        {id:num3,name:"未营业",num:0},
-      ]
-      // this.num = [0,0]
-      this.tapNo = true
-    }
-    if(getWeekDate() == "周六" || getWeekDate() == "周日"){
-      this.num = [0,0]
+  watch:{
+    resInfo(val,old){
+      val.zuori[0].img = this.num1
+      val.zuori[1].img = this.num2
+      val.zuori[2].img = this.num3
+      this.data2 = val
     }
   },
+  created(){
+    // if(getWeekDate() == "周一" || getWeekDate() == "周日"){
+    //   this.list2 = [
+    //     {id:num1,name:"未营业",num:0},
+    //     {id:num2,name:"未营业",num:0},
+    //     {id:num3,name:"未营业",num:0},
+    //   ]
+    //   // this.num = [0,0]
+    //   this.tapNo = true
+    // }
+    // if(getWeekDate() == "周六" || getWeekDate() == "周日"){
+    //   this.num = [0,0]
+    // }
+  },
   mounted() {
     // this.init()
     // this.timing()
@@ -108,7 +114,7 @@ export default {
       axios({
         method: 'get',
         url: 'https://smartpark.caih.com/zhcy/api/thirdparty/v1/open/getCanYinData',
-        timeout: 10000,
+        timeout: 100000,
       }).then(res =>{
         this.data = res.data.data
         if(this.data.countTheTopThree.length>0){

+ 0 - 108
src/components2/table1/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <el-table ref="initList" :data="initList"  height="11.11111vh" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
-      <el-table-column label="告警时间" align="center" prop="time"  show-overflow-tooltip />
-      <el-table-column label="告警内容" align="center" prop="evtname"  show-overflow-tooltip />
-      <el-table-column label="告警类型" align="center" prop="dwtype"  show-overflow-tooltip >
-         <template slot-scope="scope">
-          <span>{{scope.row.dwtype == "1" ? "用户传输装置" : scope.row.dwtype == "2" ? "喷淋水压" :
-            scope.row.dwtype == "2" ? "喷淋水压" : scope.row.dwtype == "5" ? "消防水箱液位" :
-            scope.row.dwtype == "6" ? "RTU" : scope.row.dwtype == "16" ? "消防视频监控" : "其它"}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警状态" align="center" prop="evt"  show-overflow-tooltip >
-        <template slot-scope="scope">
-          <span :class="scope.row.evt ? 'handle' : 'untreated'">{{scope.row.evt  ? "已处理" : "未处理"}}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-</template>
-<script>
-export default {
-
-  data() {
-    return {
-      initList:[],
-      table_interval:null,
-    };
-  },
-  created(){
-    this.initData();
-  },
-  mounted() {},
-  methods: {
-    //初始化数据
-    initData() {
-      let that = this
-      let num = 0
-      let wsUri = "wss://iot.usky.cn:55120";
-      try {
-          let websocket = new WebSocket(wsUri);
-          websocket.onopen = function(evt) {
-            let json = {};
-            json.agentid = 'admin';
-            websocket.send(JSON.stringify(json));
-          };
-          websocket.onclose = function(evt) {
-              this.initWebSocket();
-          };
-          websocket.onmessage = function(evt) {
-            let warningInfo = eval('(' + evt.data + ')');
-            if(warningInfo.dwtype){
-              that.initList.push(warningInfo)
-              if(num == '0'){
-                if(that.initList.length>2){
-                  that.dataScrolling();
-                  num = 1
-                }
-              }
-            }
-          };
-          websocket.onerror = function(evt) {
-            // console.log("Error:", evt.data);
-            (function() {})()
-          };
-      } catch (exception) {
-        // console.log("Exception:", exception);
-        (function() {})()
-      }
-      that.dataScrolling();
-    },
-    //数据滚动
-    dataScrolling:function(){
-        let top=this.$refs.initList.bodyWrapper;
-        this.table_interval=setInterval(() => {
-            top.scrollTop+=1;
-            if(top.clientHeight+top.scrollTop==top.scrollHeight){
-              top.scrollTop=0;
-            }
-        }, 100);
-    },
-    //鼠标进入,停止滚动
-    mouseEnter:function(){
-        clearInterval(this.table_interval);
-        this.table_interval=null;
-    },
-    //鼠标离开,开始滚动
-    mouseLeave:function(){
-        this.dataScrolling();
-    },
-    //点击行
-    clickData(row, event, column){
-      console.log(row.devIdx)
-    },
-    cellStyle (row, column, rowIndex, columnIndex) {
-    //列的label的名称
-      if (row.column.label === "告警" || row.column.label === "离线") {
-        return 'color:#2280D9' //修改的样式
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-/*最外层透明*/
-.el-table{
-  height:11.11111vh !important;
-}
-</style>
-

+ 0 - 109
src/components2/table2/index.vue

@@ -1,109 +0,0 @@
-<template>
-  <el-table ref="initList" :data="initList"  height="11.11111vh" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
-      <el-table-column label="告警时间" align="center" prop="time"  show-overflow-tooltip />
-      <el-table-column label="告警内容" align="center" prop="evtname"  show-overflow-tooltip />
-      <el-table-column label="告警类型" align="center" prop="dwtype"  show-overflow-tooltip >
-         <template slot-scope="scope">
-          <span>{{scope.row.dwtype == "1" ? "用户传输装置" : scope.row.dwtype == "2" ? "喷淋水压" : 
-            scope.row.dwtype == "2" ? "喷淋水压" : scope.row.dwtype == "5" ? "消防水箱液位" : 
-            scope.row.dwtype == "6" ? "RTU" : scope.row.dwtype == "16" ? "消防视频监控" : "其它"}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警状态" align="center" prop="evt"  show-overflow-tooltip >
-        <template slot-scope="scope">
-          <span :class="scope.row.evt ? 'handle' : 'untreated'">{{scope.row.evt  ? "已处理" : "未处理"}}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-</template>
-<script>
-export default {
-
-  data() {
-    return {
-      initList:[],
-      table_interval:null,
-      f:1
-    };
-  },
-  created(){
-    this.initData();
-  },
-  mounted() {},
-  methods: {
-    //初始化数据
-    initData() {
-      let that = this
-      let num = 0
-      let wsUri = "wss://iot.usky.cn:55120";
-      try {
-          let websocket = new WebSocket(wsUri);
-          websocket.onopen = function(evt) {
-            let json = {};
-            json.agentid = 'admin';
-            websocket.send(JSON.stringify(json));
-          };
-          websocket.onclose = function(evt) {
-              this.initWebSocket();
-          };
-          websocket.onmessage = function(evt) {
-            let warningInfo = eval('(' + evt.data + ')');
-            if(warningInfo.dwtype){
-              that.initList.push(warningInfo)
-              if(num == '0'){
-                if(that.initList.length>2){
-                  that.dataScrolling();
-                  num = 1
-                }
-              }
-            }
-          };
-          websocket.onerror = function(evt) {
-            // console.log("Error:", evt.data);
-            (function() {})()
-          };
-      } catch (exception) {
-        // console.log("Exception:", exception);
-        (function() {})()
-      }
-
-      
-    },
-    //数据滚动
-    dataScrolling(){
-        let top=this.$refs.initList.bodyWrapper;
-        this.table_interval=setInterval(() => {
-            top.scrollTop+=1;
-            if(top.clientHeight+top.scrollTop==top.scrollHeight){
-              top.scrollTop=0;
-            }
-        }, 100);
-    },
-    //鼠标进入,停止滚动
-    mouseEnter(){
-        clearInterval(this.table_interval);
-        this.table_interval=null;
-    },
-    //鼠标离开,开始滚动
-    mouseLeave(){
-        this.dataScrolling();
-    },
-    //点击行
-    clickData(row, event, column){
-    },
-    cellStyle (row, column, rowIndex, columnIndex) {
-    //列的label的名称
-      if (row.column.label === "告警" || row.column.label === "离线") {
-        return 'color:#2280D9' //修改的样式
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-/*最外层透明*/
-.el-table{
-  height:11.11111vh !important;
-}
-</style>
-

+ 10 - 12
src/components2/wenyin/index.vue

@@ -24,16 +24,8 @@
       </el-col>
     </el-col>
     <el-col class="wenyinRight">
-      <el-col class="name" v-for="(item,index) in fileList" :key="index">{{item.name}}</el-col>
-      <!-- <el-col class="name" v-if="!data.countYun">暂无打印任务</el-col> -->
-      <el-col class="name">****版本.docx</el-col>
-      <el-col class="name">****合同.pdf</el-col>
-      <el-col class="name">****材料.docx</el-col>
-      <el-col class="name">****02.docx</el-col>
-      <el-col class="name">****V2.docx</el-col>
-      <!-- <el-col class="name">任务列表sdsdds数.doc</el-col>
-      <el-col class="name">任务列表sdsdds数.doc</el-col>
-      <el-col class="name">任务列表sdsdds数.doc</el-col> -->
+      <el-col class="name" v-for="(item,index) in data.list" :key="index">{{item}}</el-col>
+      <el-col class="name" v-if="!data.list">暂无打印任务</el-col>
     </el-col>
   </el-col>
 </template>
@@ -42,6 +34,7 @@ import axios from 'axios'
 import wenyin from "@/assets/images2/文印助手icon.png";
 export default {
   name: "wenyin",
+  props:["resInfo"],
   data() {
     return {
       wenyin: wenyin,
@@ -53,9 +46,14 @@ export default {
       fileList:{}
     };
   },
+  watch:{
+    resInfo(val,old){
+      this.data = val
+    }
+  },
   mounted() {
-    this.init()
-    this.timing()
+    // this.init()
+    // this.timing()
   },
   methods: {
     init(){

+ 203 - 8
src/views/index.vue

@@ -11,21 +11,21 @@
             <intrusionAlarm alt="入侵告警信息" @rqgjClick="rqgjClick" />
           </el-col>
           <el-col class="right">
-            <parkingSpace alt="停车位统计"/>
-            <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg"/>
-            <cnergyConsumptionStatistics alt="能耗统计"/>
-            <restaurant alt="智慧餐饮" @canyinClick="canyinClick" />
+            <parkingSpace alt="停车位统计" :resInfo="data.tingche" />
+            <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg" :resInfo="data.huiyi"/>
+            <cnergyConsumptionStatistics alt="能耗统计" :resInfo="data.nenghao"/>
+            <restaurant alt="智慧餐饮" @canyinClick="canyinClick" :resInfo="data.canyin"/>
           </el-col>
         </el-col>
         <el-col  id="middleWrap" >
-          <!-- <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
+          <!-- <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='http://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
           <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='http://10.21.39.6:9000/'></iframe>
         </el-col>
         <el-col  class="rightWrap">
           <weather alt="天气"/>
           <el-col class="leftR mt16">
-            <wenyin alt="文印助手" @postMsg="postMsg"/>
-            <iOTNetworkCard alt="文印助手"/>
+            <wenyin alt="文印助手" @postMsg="postMsg" :resInfo="data.wenyin" />
+            <iOTNetworkCard alt="物联网卡" />
           </el-col>
           <el-col class="rightR mt16 ml16">
             <equipmentStatus alt="设备状态" @postMsg2="postMsg2"  />
@@ -36,6 +36,12 @@
       </el-row>
       <SpringFrame  v-if="springFrameState" :resInfo="springFrameItem"  @close="SpringFrameClose" />
       <div v-if="springFrameState" class="mask"></div>
+      <div id="loader-wrapper2" v-if="sanwei">
+        <div id="loader2"></div>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+        <div class="load_title">三维模型加载中...</div>
+      </div>
     </div>
   </div>
 </template>
@@ -71,6 +77,7 @@ export default {
   },
   data() {
     return {
+      sanwei:true,
       springFrameState:false,
       springFrameItem:{
         video:undefined,
@@ -84,14 +91,31 @@ export default {
       },
       Pshow:false,
 
+
+      //数据
+      data:{
+        tingche:{},
+        huiyi:{},
+        nenghao:{},
+        canyin:{},
+        wenyin:{}
+      }
+
     };
   },
 
   created(){
     setTimeout(() =>{
       document.getElementById("middleWrap").style.zIndex= "9"
+      this.sanwei = false
     },5000)
-
+    axios({
+        method: 'get',
+        url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
+        timeout: 10000,
+    }).then(res =>{
+      this.data = JSON.parse(res.data.data)
+    })
   },
   mounted(){
     let that = this;
@@ -341,6 +365,177 @@ export default {
 .modular:nth-child(1){
   margin-top:0px;
 }
+
+#loader-wrapper2 {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 200px;
+      margin:0 calc(50vw - 100px);
+      height: 100%;
+      z-index: 0;
+  }
+
+  #loader2 {
+      display: block;
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      -ms-animation: spin 2s linear infinite;
+      -moz-animation: spin 2s linear infinite;
+      -o-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      z-index: 1001;
+
+  }
+
+  #loader2:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      -moz-animation: spin 3s linear infinite;
+      -o-animation: spin 3s linear infinite;
+      -ms-animation: spin 3s linear infinite;
+      animation: spin 3s linear infinite;
+  }
+
+  #loader2:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -moz-animation: spin 1.5s linear infinite;
+      -o-animation: spin 1.5s linear infinite;
+      -ms-animation: spin 1.5s linear infinite;
+      -webkit-animation: spin 1.5s linear infinite;
+      animation: spin 1.5s linear infinite;
+  }
+
+  @-webkit-keyframes spin {
+      0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  @keyframes spin {
+      0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  #loader-wrapper2 .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+
+      z-index: 0;
+      -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+  }
+
+  #loader-wrapper2 .loader-section.section-left {
+      left: 0;
+  }
+
+  #loader-wrapper2 .loader-section.section-right {
+      right: 0;
+  }
+
+  .loaded #loader-wrapper2 .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+      transform: translateX(-100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader-wrapper2 .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      -ms-transform: translateX(100%);
+      transform: translateX(100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader2 {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+  }
+
+  .loaded #loader-wrapper2 {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      -ms-transform: translateY(-100%);
+      transform: translateY(-100%);
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+  }
+
+  .no-js #loader-wrapper2 {
+      display: none;
+  }
+
+  .no-js h1 {
+      color: #222222;
+  }
+
+  #loader-wrapper2 .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: fixed;
+      top: 60%;
+      left:0;
+      opacity: 1;
+      line-height: 30px;
+  }
+
+  #loader-wrapper2 .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+  }
 </style>