12.9/19.17

src/api/sensingDevice/resource/index.js

@@ -15,3 +15,11 @@ export function transitVehicleRecord(params) {
     params
   })
 }
+//人车数量
+export function humanVehicleStatistics(params) {
+  return request({
+    url: '/base/perceptionDevice/humanVehicleStatistics',
+    method: 'post',
+    params
+  })
+}

src/views/coastalMap/components/buildingInform.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="build_body">
-    <!-- 头部 -->
+  <div class="build_body" v-if="play">
+    <!-- 头部 --> 
+    <div class="X1" @click="deleteinfo"></div>
     <div class="build_title">
       <div class="header_icon"></div>
       <div class="title_text">楼栋信息</div>
@@ -163,6 +164,10 @@ export default {
     floorinfo() {
       console.log(123)
       this.$emit('floorinfo')
+    },
+    deleteinfo(){
+      this.play =!this.play
+      this.$emit('deleteinfo')
     }
   }
 }
@@ -186,7 +191,21 @@ export default {
   width: 20vw;
   height: 15vh;
   background-size: 100% 100%;
-
+  position: relative;
+    .X1{
+      width: 0.8vw;
+      height: 1.8vh;
+      // background-color: #fff;
+      position: absolute;
+      top: 0.5vh;
+    right: 0.5vw;
+    background-image: url(@/assets/house-hza/bg9.png);
+    background-size: 100% 100%;
+      &:hover{
+      background-color: #07e2d0;
+    }
+    }
+  
   .build_title {
     width: 18vw;
     height: 3.5vh;

src/views/coastalMap/components/floorInform.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="add">
+  <div class="add" v-if="show">
     <!-- 户室信息 -->
+    <div class="X2"  @click="deleteinfo" ></div>
     <div class="build_title">
       <div class="header_icon"></div>
       <div class="title_text">户室信息</div>
@@ -103,6 +104,7 @@ export default {
   name: 'FloorInform',
   data() {
     return {
+      show:'true',
           animateUp: false,
       boxlist: [
         { name: '地址', place: '射阳县五星街道解放南路110-3号5幢' },
@@ -144,6 +146,10 @@ export default {
         this.animateUp = false
       }, 500)
     },
+    deleteinfo(){
+   console.log(123);
+      this.show =!this.show
+    }
 
   }
 }
@@ -157,6 +163,19 @@ export default {
   background-image: url(../../../assets/house-hza/bg7.png);
   background-size: 100% 100%;
   padding-left: 1vw;
+     .X2{
+      width: 0.8vw;
+      height: 1.8vh;
+      // background-color: #fff;
+      position: absolute;
+      top: 0.5vh;
+    right: 0.5vw;
+    background-image: url(@/assets/house-hza/bg9.png);
+    background-size: 100% 100%;
+      &:hover{
+      background-color: #07e2d0;
+    }
+    }
   .build_title {
     width: 18vw;
     height: 3.5vh;

src/views/coastalMap/index.vue

@@ -35,11 +35,12 @@
 
     <!-- 显示实有房屋弹窗 -->
     <div class="left_house_box" v-else-if="isplay == '2'">
-      <BuildingInform @floorinfo="floorinfo"></BuildingInform>
+      <BuildingInform @floorinfo="floorinfo" @deleteinfo="deleteinfo" ></BuildingInform>
     </div>
     <div class="floorInform" v-if="only">
     <floorInform></floorInform>
     </div>
+    <!--  -->
 
     <!-- 右边区域 -->
     <div class="right_box" v-if="isplay == '1'">
@@ -159,7 +160,7 @@ export default {
       this.isplay = 2
       //第二步显示实有房屋的盒子
       document.getElementsByClassName('point_list')[0].style.right = '0'
-      document.getElementsByClassName('left_box')[0].style.left = '0'
+     
     },
     timeStart() {
       this.timer = setInterval(() => {
@@ -180,6 +181,10 @@ export default {
     },
     floorinfo() {
       this.only = true
+    },
+    deleteinfo(){
+      this.isplay=1
+       document.getElementsByClassName('point_list')[0].style.right = '50'
     }
   }
 }

src/views/sensingDevice/components/mancarStatistics.vue

@@ -15,65 +15,51 @@
 
 <script>
 import * as echarts from 'echarts'
-import EleResize from '@/utils/esresize'
+import { humanVehicleStatistics } from '@/api/sensingDevice/resource/index'
+
 export default {
   name: 'ManCar',
   data() {
-    return {}
+    return {
+      list: {}
+    }
   },
   mounted() {
     this.init_charts()
     this.init_car_charts()
   },
+  created() {
+    this.onhumanVehicleStatistics()
+  },
   methods: {
+    onhumanVehicleStatistics() {
+      const res = humanVehicleStatistics()
+      console.log(res, 'aaa')
+    },
+
     init_charts() {
       var chartDom = document.getElementById('man-charts')
       var myChart = echarts.init(chartDom)
-      let resize_div = document.getElementById('man-charts')
-      // echarts表自适应
-      EleResize.on(resize_div, () => {
-        myChart.resize()
-      })
+      var option
+
       const gaugeData = [
         {
-          value: 80,
-          name: 'Perfect',
+          value: 2656446,
+          name: '人口',
           title: {
-            offsetCenter: ['0%', '-30%']
+            offsetCenter: ['0%', '30%']
           },
           detail: {
             valueAnimation: true,
             offsetCenter: ['0%', '-20%']
           }
         }
-        // {
-        //   value: 40,
-        //   name: 'Good',
-        //   title: {
-        //     offsetCenter: ['0%', '0%']
-        //   },
-        //   detail: {
-        //     valueAnimation: true,
-        //     offsetCenter: ['0%', '10%']
-        //   }
-        // },
-        // {
-        //   value: 60,
-        //   name: 'Commonly',
-        //   title: {
-        //     offsetCenter: ['0%', '30%']
-        //   },
-        //   detail: {
-        //     valueAnimation: true,
-        //     offsetCenter: ['0%', '40%']
-        //   }
-        // }
       ]
-      let option = {
+      option = {
         series: [
           {
             type: 'gauge',
-            startAngle: 90,
+            startAngle: 120,
             endAngle: -270,
             pointer: {
               show: false
@@ -107,71 +93,62 @@ export default {
             },
             data: gaugeData,
             title: {
-              fontSize: 14
+              fontSize: 18,
+              color: '#fff',
+              fontweight: 600
             },
             detail: {
-              // width: 50,
-              // height: 14,
+              width: 50,
+              height: 14,
               fontSize: 12,
-              color: 'inherit',
+              color: '',
               borderColor: 'inherit',
               borderRadius: 20,
               borderWidth: 1,
-              formatter: '{value}%'
+              formatter: '{value}'
             }
           }
         ]
       }
+      setInterval(function () {
+        gaugeData.value = +(Math.random() * 100).toFixed(2)
+
+        myChart.setOption({
+          series: [
+            {
+              data: gaugeData,
+              pointer: {
+                show: false
+              }
+            }
+          ]
+        })
+      }, 2000)
       option && myChart.setOption(option)
     },
     init_car_charts() {
       var chartDom = document.getElementById('car-charts')
       var myChart = echarts.init(chartDom)
-      let resize_div = document.getElementById('car-charts')
-      // echarts表自适应
-      EleResize.on(resize_div, () => {
-        myChart.resize()
-      })
+      var option
+
       const gaugeData = [
         {
-          value: 20,
-          name: 'Perfect',
-          title: {
-            offsetCenter: ['0%', '-30%']
-          },
-          detail: {
-            valueAnimation: true,
-            offsetCenter: ['0%', '-20%']
-          }
-        },
-        {
-          value: 40,
-          name: 'Good',
-          title: {
-            offsetCenter: ['0%', '0%']
-          },
-          detail: {
-            valueAnimation: true,
-            offsetCenter: ['0%', '10%']
-          }
-        },
-        {
-          value: 60,
-          name: 'Commonly',
+          value: 755554,
+          name: '车辆',
           title: {
             offsetCenter: ['0%', '30%']
           },
           detail: {
             valueAnimation: true,
-            offsetCenter: ['0%', '40%']
+            offsetCenter: ['0%', '-20%']
           }
         }
       ]
-      let option = {
+      option = {
         series: [
           {
             type: 'gauge',
-            startAngle: 90,
+            startAngle: 120,
             endAngle: -270,
             pointer: {
               show: false
@@ -188,7 +165,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                width: 40
+                width: 10
               }
             },
             splitLine: {
@@ -205,21 +182,37 @@ export default {
             },
             data: gaugeData,
             title: {
-              fontSize: 14
+              fontSize: 18,
+              color: '#fff',
+              fontweight: 600
             },
             detail: {
               width: 50,
               height: 14,
-              fontSize: 14,
+              fontSize: 12,
               color: 'inherit',
               borderColor: 'inherit',
               borderRadius: 20,
               borderWidth: 1,
-              formatter: '{value}%'
+              formatter: '{value}'
             }
           }
         ]
       }
+      setInterval(function () {
+        gaugeData.value = +(Math.random() * 100).toFixed(2)
+
+        myChart.setOption({
+          series: [
+            {
+              data: gaugeData,
+              pointer: {
+                show: false
+              }
+            }
+          ]
+        })
+      }, 2000)
       option && myChart.setOption(option)
     }
   }
@@ -253,7 +246,7 @@ export default {
     width: 20vw;
     height: 19vh;
     color: #edf1f7;
-    background-image: url('../../../assets/picture/bg_1.png');
+
     background-repeat: no-repeat;
     background-size: 100% auto;
 
@@ -269,13 +262,13 @@ export default {
     //   right: 3.5vw;
     // }
   }
-  // #man-charts {
-  //   width: 10vw;
-  //   height: 19vh;
-  // }
-  // #car-charts {
-  //   width: 10vw;
-  //   height: 19vh;
-  // }
+  #man-charts {
+    width: 10vw;
+    height: 19vh;
+  }
+  #car-charts {
+    width: 10vw;
+    height: 19vh;
+  }
 }
 </style>