天气

src/utils/api.js

@@ -105,3 +105,12 @@ export function getVideo(data) {
     data: data
   })
 }
+
+/** 车辆通行图标**/
+export function getCar(data) {
+  return axios({
+    url: 'http://192.168.1.171:10253/produce/screen/car/count_car_record',
+    method: 'get',
+    params: data
+  })
+}

src/views/BioSafety/BioSafety.vue

@@ -61,7 +61,7 @@
           </div>
         </div>
         <div class="bio-content">
-          <chart-bar></chart-bar>
+          <chart-bar :data="data0"></chart-bar>
         </div>
       </div>
       <div class="bio-flex-center">
@@ -197,6 +197,8 @@
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
 import ChartBar from "@/views/BioSafety/chart/ChartBar";
+import {getCar} from "@/utils/api";
+
 export default {
   name: "BioSafety",
   components: {
@@ -221,6 +223,13 @@ export default {
         //   clickable: true
         // }
       },
+      data0: {
+        id: 11,
+        time: [],
+        data: [],
+        name: '',
+        unit: '分钟'
+      },
       data1: {
         id: 1,
         time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
@@ -243,6 +252,23 @@ export default {
         unit: '次'
       }
     }
+  },
+  methods: {
+    init() {
+      this.data0.time = [];
+      this.data0.data = [];
+      getCar({}).then(res => {
+        if(res.code === 10000) {
+          res.data.forEach(item => {
+            this.data0.time.push(item.time);
+            this.data0.data.push(item.value);
+          })
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init()
   }
 }
 </script>
@@ -537,4 +563,4 @@ export default {
   .case1 {
     height: 60px;
   }
-</style>
+</style>

src/views/BioSafety/chart/ChartBar.vue

@@ -31,22 +31,13 @@ export default {
       // 获取当前数组的数量并push 成新数组
       let data1 = new Array(this.data.data.length).fill(max1);
       let options = {
-        // title: {
-        //   text: `用水监测`,
-        //   x: "center",
-        //   y: "top",
-        //   textStyle: {
-        //     fontSize: 16,
-        //     color: "#ffffff",
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     // 坐标轴指示器，坐标轴触发有效
+        //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
         //   },
         // },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-        },
         grid: {
           top: "5%",
           left: "5%",
@@ -152,4 +143,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>