echarts

src/api/sensingDevice/resource/index.js

@@ -23,3 +23,19 @@ export function humanVehicleStatistics(params) {
     params
   })
 }
+//人流量
+export function humanTrafficStatistics(params) {
+  return request({
+    url: '/base/perceptionDevice/humanTrafficStatistics',
+    method: 'post',
+    params
+  })
+}
+//车流量
+export function vehicleTrafficStatistics(params) {
+  return request({
+    url: '/base/perceptionDevice/vehicleTrafficStatistics',
+    method: 'post',
+    params
+  })
+}

src/utils/request.js

@@ -3,10 +3,10 @@ import vm from '../main'
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  baseURL: 'http://50.146.63.43:1129/hjapi',
+  // baseURL: 'http://50.146.63.43:1129/hjapi',
   // baseURL: 'http://121.41.91.94:12002/hjapi',
   //baseURL: `http://${window.location.host}/hjapi`,
-  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
+  baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
   timeout: 50000,
   headers: { 'content-type': 'application/json' }
 })

src/views/coastalMap/components/buildingInform.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="build_body" v-if="play">
-    <!-- 头部 --> 
+    <!-- 头部 -->
     <div class="X1" @click="deleteinfo"></div>
     <div class="build_title">
       <div class="header_icon"></div>
@@ -9,22 +9,25 @@
     <!-- 模块内容 -->
     <div class="build_box">
       <div>
-     <div class="build_box_left">地址</div>
+        <div class="build_box_left">地址</div>
-      <div class="build_box_left">所在网络</div>
+        <div class="build_box_left">所在网络</div>
-      <div class="build_box_left">所在警务区</div>
+        <div class="build_box_left">所在警务区</div>
       </div>
- 
+
       <div>
-   <div class="build_box_for" v-for="(item, index) in boxlist" :key="index">
+        <div
-        <div class="build_box_right">{{ item.place }}</div>
+          class="build_box_for"
-      </div>
+          v-for="(item, index) in boxlist"
+          :key="index"
+        >
+          <div class="build_box_right">{{ item.place }}</div>
+        </div>
       </div>
-   
     </div>
- <!-- 实有房屋 -->
+    <!-- 实有房屋 -->
-<ActualBuildingVue></ActualBuildingVue>
+    <ActualBuildingVue></ActualBuildingVue>
     <!-- 实有人口标题 -->
-<ActualPeopleVue></ActualPeopleVue>
+    <ActualPeopleVue></ActualPeopleVue>
     <!-- 房屋结构 -->
     <div class="structure">
       <div class="structure_icon"></div>
@@ -57,7 +60,11 @@
         >
           {{ item.floor2 }}
         </div>
-        <div class="f3" :style="{ backgroundImage: back_change2(item.type1) }">
+        <div
+          class="f3"
+          @click="floorinfo1"
+          :style="{ backgroundImage: back_change2(item.type1) }"
+        >
           {{ item.floor3 }}
         </div>
       </div>
@@ -70,7 +77,7 @@ import ActualBuildingVue from './actualBuilding.vue'
 import ActualPeopleVue from './actualPeople.vue'
 
 export default {
-  components:{
+  components: {
     ActualBuildingVue,
     ActualPeopleVue
   },
@@ -165,8 +172,12 @@ export default {
       console.log(123)
       this.$emit('floorinfo')
     },
-    deleteinfo(){
+    floorinfo1() {
-      this.play =!this.play
+      console.log(123)
+      this.$emit('floorinfo1')
+    },
+    deleteinfo() {
+      this.play = !this.play
       this.$emit('deleteinfo')
     }
   }
@@ -192,20 +203,20 @@ export default {
   height: 15vh;
   background-size: 100% 100%;
   position: relative;
-    .X1{
+  .X1 {
-      width: 0.8vw;
+    width: 0.8vw;
-      height: 1.8vh;
+    height: 1.8vh;
-      // background-color: #fff;
+    // background-color: #fff;
-      position: absolute;
+    position: absolute;
-      top: 0.5vh;
+    top: 0.5vh;
     right: 0.5vw;
     background-image: url(@/assets/house-hza/bg9.png);
     background-size: 100% 100%;
-      &:hover{
+    &:hover {
       background-color: #07e2d0;
     }
-    }
+  }
-  
+
   .build_title {
     width: 18vw;
     height: 3.5vh;
@@ -239,20 +250,20 @@ export default {
     display: flex;
     // background-color: #fff;
     .build_box_left {
-        width: 5vw;
+      width: 5vw;
-        height: 3.5vh;
+      height: 3.5vh;
-        background-color: #04548a;
+      background-color: #04548a;
-        padding-left: 0.5vw;
+      padding-left: 0.5vw;
-        color: antiquewhite;
+      color: antiquewhite;
-        padding-top: 0.5vh;
+      padding-top: 0.5vh;
-       margin-bottom: 0.5vh;
+      margin-bottom: 0.5vh;
-       font-size: 12px;
+      font-size: 12px;
-       align-items: center;
+      align-items: center;
-      }
+    }
     .build_box_for {
       // background-color: orange;
-         width: 4vw;
+      width: 4vw;
-   
+
       .build_box_right {
         width: 13vw;
         height: 3.5vh;
@@ -264,13 +275,11 @@ export default {
         color: antiquewhite;
         margin-bottom: 0.5vh;
         display: flex;
-         align-items: center;
+        align-items: center;
       }
     }
   }
 
-
-
   .structure {
     width: 18vw;
     height: 4vh;

src/views/coastalMap/index.vue

@@ -35,10 +35,14 @@
 
     <!-- 显示实有房屋弹窗 -->
     <div class="left_house_box" v-else-if="isplay == '2'">
-      <BuildingInform @floorinfo="floorinfo" @deleteinfo="deleteinfo" ></BuildingInform>
+      <BuildingInform
+        @floorinfo="floorinfo"
+        @deleteinfo="deleteinfo"
+        @floorinfo1="floorinfo1"
+      ></BuildingInform>
     </div>
     <div class="floorInform" v-if="only">
-    <floorInform></floorInform>
+      <floorInform></floorInform>
     </div>
     <!--  -->
 
@@ -160,7 +164,6 @@ export default {
       this.isplay = 2
       //第二步显示实有房屋的盒子
       document.getElementsByClassName('point_list')[0].style.right = '0'
-     
     },
     timeStart() {
       this.timer = setInterval(() => {
@@ -181,10 +184,15 @@ export default {
     },
     floorinfo() {
       this.only = true
+      // this.only = false
     },
-    deleteinfo(){
+    floorinfo1() {
-      this.isplay=1
+      this.only = false
-       document.getElementsByClassName('point_list')[0].style.right = '50'
+      this.only = true
+    },
+    deleteinfo() {
+      this.isplay = 1
+      document.getElementsByClassName('point_list')[0].style.right = '50'
     }
   }
 }
@@ -201,7 +209,6 @@ export default {
     left: 21vw;
   }
 
-
   .system_title {
     width: 100vw;
     height: 18vh;

src/views/sensingDevice/components/carLarge.vue

@@ -11,39 +11,97 @@
 </template>
 
 <script>
+import { vehicleTrafficStatistics } from '@/api/sensingDevice/resource'
 import * as echarts from 'echarts'
-import EleResize from '@/utils/esresize'
 export default {
   name: 'CarLarge',
   data() {
-    return {}
+    return {
+      list: [],
+      list1: []
+    }
   },
   mounted() {
-    this.init_charts()
+    setTimeout(() => {
+      this.init_charts()
+    }, 500)
+  },
+  created() {
+    this.onvehicleTrafficStatistics()
   },
   methods: {
+    async onvehicleTrafficStatistics() {
+      console.log(456)
+      const res = await vehicleTrafficStatistics()
+      this.list = Object.keys(res.data)
+      this.list1 = Object.values(res.data)
+      console.log(this.list, 'kkk')
+    },
     init_charts() {
+      console.log(123)
       var chartDom = document.getElementById('carMain')
       var myChart = echarts.init(chartDom)
-      let resize_div = document.getElementById('carMain')
-      // *echarts表自适应
-      EleResize.on(resize_div, () => {
-        myChart.resize()
-      })
       var option
-
       option = {
-        xAxis: {
+        tooltip: {
-          type: 'category',
+          trigger: 'axis',
-          data: ['11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04']
+          axisPointer: {
-        },
+            type: 'cross',
-        yAxis: {
+            crossStyle: {
-          type: 'value'
+              color: '#999'
+            }
+          }
         },
+
+        xAxis: [
+          {
+            type: 'category',
+            data: this.list,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} °C'
+            }
+          }
+        ],
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            name: '车流量',
-            type: 'bar'
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml'
+              }
+            },
+            data: this.list1
+          },
+
+          {
+            // name: 'Temperature',
+            type: 'line',
+            yAxisIndex: 1,
+
+            data: this.list1
           }
         ]
       }
@@ -80,12 +138,11 @@ export default {
     background-image: url('@/assets/picture/bg_5.png');
     background-size: 100% auto;
     background-repeat: no-repeat;
-
+  }
-    .car_charts {
+  .car_charts {
-      width: 20vw;
+    width: 20vw;
-      height: 30vh;
+    height: 34vh;
-      color: #4ca5dd;
+    color: #4ca5dd;
-    }
   }
 }
 </style>

src/views/sensingDevice/components/mancarStatistics.vue

@@ -32,11 +32,12 @@ export default {
     this.onhumanVehicleStatistics()
   },
   methods: {
-    onhumanVehicleStatistics() {
+    async onhumanVehicleStatistics() {
-      const res = humanVehicleStatistics()
+      const res = await humanVehicleStatistics()
-      console.log(res, 'aaa')
+      this.list = res.data
+      console.log(this.list, 'aaa')
     },
-
+    //
     init_charts() {
       var chartDom = document.getElementById('man-charts')
       var myChart = echarts.init(chartDom)
@@ -44,7 +45,7 @@ export default {
 
       const gaugeData = [
         {
-          value: 2656446,
+          value: this.list.userCount,
           name: '人口',
           title: {
             offsetCenter: ['0%', '30%']
@@ -126,6 +127,7 @@ export default {
       }, 2000)
       option && myChart.setOption(option)
     },
+    //
     init_car_charts() {
       var chartDom = document.getElementById('car-charts')
       var myChart = echarts.init(chartDom)
@@ -133,7 +135,7 @@ export default {
 
       const gaugeData = [
         {
-          value: 755554,
+          value: this.list.vehicleCount,
           name: '车辆',
           title: {
             offsetCenter: ['0%', '30%']

src/views/sensingDevice/components/peopleLarge.vue

@@ -11,14 +11,119 @@
 </template>
 
 <script>
-import { init_echarts } from '../utils/initEcharts'
+import * as echarts from 'echarts'
+import { humanTrafficStatistics } from '@/api/sensingDevice/resource'
 export default {
   name: 'PeopleLarge',
+
   data() {
-    return {}
+    return {
+      list: [],
+      list1: []
+    }
   },
   mounted() {
-    init_echarts()
+    setTimeout(() => {
+      this.echarts_icon()
+    }, 500)
+  },
+  created() {
+    this.onhumanTrafficStatistics()
+  },
+  methods: {
+    async onhumanTrafficStatistics() {
+      const res = await humanTrafficStatistics()
+      this.list = Object.keys(res.data)
+      this.list1 = Object.values(res.data)
+      console.log(this.list, 'iiiii')
+    },
+    //
+    echarts_icon() {
+      console.log(this.list, 'haha')
+      console.log('hza')
+      var chartDom = document.getElementById('people_chart')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        // legend: {
+        //   itemGap: 24 // 修改间距
+        // },
+
+        grid: {
+          top: '10%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.list,
+            axisLabel: {
+              textStyle: {
+                fontSize: '7'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '人流量',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              borderColor: '#464646',
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.list1
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
   }
 }
 </script>
@@ -52,11 +157,11 @@ export default {
     background-image: url('@/assets/picture/bg_5.png');
     background-size: 100% auto;
     background-repeat: no-repeat;
+  }
 
-    .people_chart {
+  #people_chart {
-      width: 20vw;
+    width: 20vw;
-      height: 25vh;
+    height: 25vh;
-    }
   }
 }
 </style>