数据对接

ruoyi-ui/src/api/data/staticalData.js

@@ -45,11 +45,20 @@ export function getStaticDevice() {
       })
     }  
 
-        // 查询超标船舶统计
-        export function getIllegalShipStatic(query) {
-          return request({
-            url: 'gas/common/illegalShipStatic',
-            method: 'get',
-            params: query
-          })
-        }  
+    // 查询超标船舶统计
+    export function getIllegalShipStatic(query) {
+      return request({
+        url: 'gas/common/illegalShipStatic',
+        method: 'get',
+        params: query
+      })
+    }  
+
+       // 查询超标船舶统计
+      export function queryIllegalInfoList(query) {
+      return request({
+        url: 'gas/common/queryIllegalInfoList',
+        method: 'get',
+        params: query
+      })
+    }  

ruoyi-ui/src/views/components/table/homeTable.vue

@@ -96,7 +96,6 @@
           </el-tab-pane>
           <el-tab-pane label="主要监测数据" name="second">
             <el-table
-              stripe='true'
               :header-cell-style="{ background: '#e4eafc'}"
               ref="singleTable"
               :data="tableData"
@@ -138,7 +137,6 @@
 
           <el-tab-pane label="其它监测数据" name="thrid">
             <el-table
-              stripe='true'
               :header-cell-style="{ background: '#e4eafc'}"
               ref="singleTable"
               :data="tableData"
@@ -245,9 +243,9 @@
 
     <div class="shipInformation">
       <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
-      <scroll></scroll>
+      <scroll illegalStatus=1></scroll>
       <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
-      <scroll></scroll>
+      <scroll illegalStatus=1></scroll>
     </div>
 
     <div class="equipmentContent">
@@ -277,7 +275,7 @@
           <div style="float:left;color:#ffffff">开始</div>
           <div style="float:left;margin-left:3rem">
             <el-date-picker
-              v-model="beginTime"
+              v-model="shipDate.startMonth"
               type="month"
               placeholder="选择月份">
             </el-date-picker>
@@ -285,7 +283,7 @@
           <div style="float:left;margin-left:3rem;color:#ffffff">结束</div>
           <div style="float:left;margin-left:3rem">
             <el-date-picker
-              v-model="endTime"
+              v-model="shipDate.endMonth"
               type="month"
               placeholder="选择月份">
             </el-date-picker>
@@ -311,7 +309,7 @@
 
 <script>
 import scroll from "./scroll.vue"
-import {getDeviceType, getIllegalShipStatic, getStaticDevice} from "@/api/data/staticalData";
+import {getDeviceType, getIllegalShipStatic, getStaticDevice,getSo2Time,queryIllegalInfoList} from "@/api/data/staticalData";
 
 export default {
   name: "homeTable",
@@ -332,6 +330,7 @@ export default {
       normalCount: 1,
       dialogVisibleShip: false,
       beginTime: '',
+      so2TimeData:{},
       endTime: '',
       deviceTotal: 0,
       queryParams: {
@@ -379,21 +378,90 @@ export default {
         value: 0.09,
         count: 0.3,
         address: '上海市普陀区金沙江路 1516 弄'
-      }*/]
+      }*/],shipDate:{
+               startMonth:'',
+               endMonth:''
+        },
+        shipDateArry:[
+
+        ],
     }
   }, mounted() {
+    this.getMonthDate();
     this.getStaticDevice();
     this.getIllegalShipStatic();
     //  console.log(111111111111)
     //  this.getChart();
   },
   methods: {
-    openShipChart() {
-      console.log(1111111);
+    getSo2Time(){
+           getSo2Time(this.shipDate).then(data =>{
+                  this.getMonthArry(this.shipDate.startMonth,this.shipDate.endMonth);
+                  this.so2TimeData = data.data
+                  this.getShipChart();  
+          });
+    },
+    getMonthArry(start,end){
+          // this.shipDateArry.push(start);
+          var startYear = start.split('-')[0]; 
+          var startMonth = parseInt(start.split('-')[1]); 
+          var endYear = end.split('-')[0]; 
+          var endMonth = parseInt(end.split('-')[1]); 
+          if(startYear == endYear){
+              for(var i = startMonth;i<endMonth+1;i++){
+                if(i<10){
+                      this.shipDateArry.push(startYear+'-'+"0"+i);
+                }else{
+                      this.shipDateArry.push(startYear+'-'+i); 
+                }       
+              }
+          }else{
+              for(var i = startMonth;i<13;i++){
+                  if(i<10){
+                      this.shipDateArry.push(startYear+'-'+"0"+i);
+                }else{
+                      this.shipDateArry.push(startYear+'-'+i); 
+                }       
+              }   
+            for(var i = 1;i<endMonth;i++){
+                if(i<10){
+                      this.shipDateArry.push(endYear+'-'+"0"+i);
+                }else{
+                      this.shipDateArry.push(endYear+'-'+i); 
+                }       
+              }   
+
+          }
+          console.log(this.shipDateArry);
+    },
+    getMonthDate(){
+          var time = new Date();
+          var year = time.getFullYear();
+          var month = time.getMonth();
+          if(month > 9){
+               this.shipDate.endMonth = year+"-"+month
+          }else if(month > 0){
+               this.shipDate.endMonth = year+"-"+"0"+month
+          }else{
+               this.shipDate.endMonth = (year-1)+"-"+'12';
+          }
+          if(month == 6){
+                this.shipDate.startMonth = year+"-"+'01';
+          }else if(month > 6){
+                this.shipDate.startMonth = year+"-"+'0'+(month-6);
+          }else if(month < 6){
+               if(month >= 3){
+                 this.shipDate.startMonth = (year-1)+"-"+(month+7);
+               }else{
+                 this.shipDate.startMonth = (year-1)+"-"+"0"+(month+7);
+               }
+          }
+    },
+    openShipChart(){
       const t = this;
       setTimeout(() => {
         //  执行echarts画图方法
-        t.getShipChart();
+        t.getSo2Time();
       }, 0);
     },
     handleClick(tab, event) {
@@ -415,7 +483,6 @@ export default {
     },
     getStaticDevice() {
       getStaticDevice().then(response => {
-        console.log(response);
         let nameArry = [];
         let dataArry = [];
         this.deviceTotal = 0;
@@ -434,6 +501,28 @@ export default {
       });
     },
     getShipChart() {
+      var so2Arry = [];
+      var aisArry = [];
+      var hyArry = [];
+      // console.log(data);
+       for(var index in this.shipDateArry){
+            // console.log(this.shipDateArry[index]+'-01T00:00:00Z');
+            // console.log(this.so2TimeData.so2['2021-01-01T00:00:00Z']);
+            if(this.so2TimeData.so2[this.shipDateArry[index]+'-01T00:00:00Z']){
+                  so2Arry.push(this.so2TimeData.so2[this.shipDateArry[index]+'-01T00:00:00Z']);
+            }else {
+                  so2Arry.push(0);
+            }  
+            if(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']){
+                  aisArry.push(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']);
+            }else{
+                  aisArry.push(0);
+            }if(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']){
+                  hyArry.push(this.so2TimeData.black[this.shipDateArry[index]+'-01T00:00:00Z']);
+            }else{
+                  hyArry.push(0);
+            }
+        }
       var myChart = this.$echarts.init(document.getElementById('shipChart'));
       var option = {
          color:['#FF2D3C','#FFA647','#61FAFB'],
@@ -446,7 +535,7 @@ export default {
           },
         xAxis: {
           type: 'category',
-          data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
+          data: this.shipDateArry,
           axisLabel: {
             show: true,  //这里的show用于设置是否显示x轴下的字体 默认为true
             interval: 0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
@@ -484,7 +573,7 @@ export default {
         },
         series: [{
           name: '黑烟抓拍',
-          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          data: hyArry,
           type: 'line',
           smooth: true,
           itemStyle: {
@@ -497,7 +586,7 @@ export default {
           },
         }, {
           name: '光谱',
-          data: [700, 902, 501, 734, 1390, 1230, 1120],
+          data: so2Arry,
           type: 'line',
           smooth: true,
           itemStyle: {
@@ -510,7 +599,7 @@ export default {
           },
         }, {
           name: '嗅探',
-          data: [1020, 932, 701, 434, 1230, 1430, 1620],
+          data: aisArry,
           type: 'line',
           smooth: true,
           itemStyle: {
@@ -526,12 +615,7 @@ export default {
       myChart.setOption(option);
     },
     getChart(nameArry, dataArry) {
-      // console.log(2222222222222222)
-      // this.dialogVisible = true;
-      console.log(document.getElementById('equipmentChart'));
-      console.log(2222222222222222)
       var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
-      console.log(myChart);
       var option = {
         tooltip: {
           trigger: 'axis',
@@ -635,11 +719,8 @@ export default {
       });
     },
     getTypeChart(nameArry, dataArry) {
-      console.log(nameArry);
-      // console.log(2222222222222222)
       // this.dialogVisible = true;
       var myChart = this.$echarts.init(document.getElementById('equipmentTypeChart'));
-      console.log(myChart);
       var option = {
         tooltip: {
           trigger: 'axis',

ruoyi-ui/src/views/components/table/scroll.vue

@@ -1,7 +1,7 @@
 <template>
 <div id="box">
 <div id="con1" ref="con1" :class="{anim:animate==true}" style="color:white" @mouseenter="mEnter" @mouseleave="mLeave">
-<div v-for='item in items'>
+<div v-for='item in items' style="font-size:3rem">
       <span>{{item.name}}</span>
        <span style="margin-left:3rem;color:#A8A8A8">统计时间:{{item.time}}</span>
 </div>
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import {queryIllegalInfoList} from "@/api/data/staticalData";
+
 export default {
         data () {
             return {
@@ -25,13 +27,36 @@ export default {
                 ],
             }
         },
+        props:['illegalStatus'],
         mounted () {
-
+               this.queryIllegalInfoList();
                 this.timer1= setInterval(this.scroll,3000)
 
         },
 
         methods: {
+              queryIllegalInfoList(){
+                    queryIllegalInfoList({'illegalStatus':this.illegalStatus}).then(data =>{
+                        this.items = data.data
+                        for(var index in this.items){
+                            if(this.items[index].illegalType == null){
+                                  var obj =this.items[index]
+                                  obj.name = (parseInt(index)+1)+'.'+obj.aisShipName+"在"+obj.snapPos+"监测点检测黑度为"+obj.rcgSoot
+                                  obj.time=this.timeFormate(obj.snapTimeFmt)
+                            }
+                             if(this.items[index].illegalType != null){
+                                  var obj =this.items[index]
+                                  obj.name = (parseInt(index)+1)+'.'+obj.shipName+"在"+obj.monitorPointName+"监测点检测黑度为"+obj.spercent
+                                  obj.time=this.timeFormate(obj.createTime)
+                            }
+                        }
+                    })
+                },
+            timeFormate(date){
+                // var date = "2018-10-08 15:22:45";
+                var newDate = new Date(date).toLocaleDateString()
+                return newDate.split('/')[0]+"年"+newDate.split('/')[1]+'月'+newDate.split('/')[2]+'日';
+            },
             scroll(){
                     let con1 = this.$refs.con1;
                 //     console.log(con1);