gangkou/ruoyi-ui/src/views/home/components/middle.vue

<template>
  <div class="reservoir-survey1">

    <!-- 最上面 密封点概况-->
    <div class="reservoir-top">
      <third-title title="实时报警信息">
      </third-title>
    
        <div  class="beautified-div">
          <div>油气回收在线监测设备</div>
          <dv-scroll-board :config="config" style="width:100%;height:170px" />
        </div>
        <div  class="beautified-div">
          <div>厂内移动式设备</div>
          <dv-scroll-board :config="config1" style="width:100%;height:170px" />
        </div>
        <div  class="beautified-div">
          <div>厂界在线监测设备</div>
          <dv-scroll-board :config="config2" style="width:100%;height:170px" />
        </div>    
    </div>
  </div>
</template>

<script>
import store from "@/store";
import ThirdTitle from "./ThirdTitle.vue";
import { queryDistrict } from "@/api/oil/factory";
import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
import { countGroupByType, queryDetectProgress } from "@/api/home";
import bus from '@/utils/bus.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    ThirdTitle
  },
  created() {
    this.getCurrentTime()
    bus.$off("changeYearEvent1")
    bus.$on('changeYearEvent1', (val) => {

      this.queryParams.year = Number(val)

      // //查检测率情况
      this.queryExam();

    })
    bus.$off("changeDistrict1")
    bus.$on('changeDistrict1', (val1, val2) => {
      this.queryParams.districtName = val1
      this.districtCode = val2
      if (val1 == '') {
        this.districtName = '全市'
      } else {
        this.districtName = val1
      }

      //查密封点数量
      this.queryPointNum();
      // //查检测率情况
      this.queryExam();
    })
  },
  destroyed() {

  },

  mounted() {
    // let roles=store.getters.roles
    // roles.forEach((val)=>{
    //   if(val=='factory'){
    //   this.queryParams.factoryId=store.getters.user.factoryId
    //   }})
    //查密封点数量
    //this.queryPointNum();
    // //查检测率情况
    //this.queryExam();
  },

  data() {
    //这里存放数据
    return {
      config: {
        header: ['设备编号', '报警时间', '报警值'],
        data: [
          ['YQHS0004', '08:12:02', '100ppm'],
          ['YQHS0003', '09:13:02', '210ppm'],
          ['YQHS0006', '10:12:02', '110ppm'],
        ]
      },
      config1: {
        header: ['设备编号', '报警时间', '报警值'],
        data: [
          ['SNYDS0001', '08:12:02', '100ppm'],
          ['SNYDS0004', '09:13:02', '210ppm'],
          ['SNYDS0001', '18:12:02', '110ppm'],
          ['SNYDS0002', '10:12:02', '105ppm'],
        ]
      },
      config2: {
        header: ['设备编号', '报警时间', '报警值'],
        data: [
          ['CJZX0002', '07:00:59', '100ppm'],
        ]
      },
      districtCode: '',
      districtName: '全市',
      queryParams: {
        year: undefined,
        startTime: undefined,
        endTime: undefined,
        districtName: undefined,
        factoryId: undefined,
      },
      time: '',
      dateTimer: '',
      //密封点概况
      numTotal: {
        pointTotal: [],
        staticPointTotal: 0,
        dynamicPointTotal: 0.
      },
      //检测率概况
      examList: [],

    };
  },

  methods: {


    getCurrentTime() {

      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      const date = new Date()
      this.queryParams.year = date.getFullYear()
      this.queryParams.year = Number(this.queryParams.year)


    },

    //查询全市密封点数量
    async queryPointNum() {
      countGroupByType(this.queryParams).then(response => {
        this.numTotal.pointTotal = NumbersConvertedToArrays(response.data.pointTotal);
        this.numTotal.staticPointTotal = response.data.staticPointTotal;
        this.numTotal.dynamicPointTotal = response.data.dynamicPointTotal;
      });
    },
    queryExam() {
      this.examList = []
      queryDetectProgress(this.queryParams).then(response => {
        this.examList = response.data
      });
    },

  },
};
</script>
<style lang='scss' scoped>
@keyframes turn {
  0% {
    border-image: linear-gradient(to right, #003194, #00ffea) 1;
  }

  25% {
    border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
  }

  50% {
    border-image: linear-gradient(to left, #003194, #00ffea) 1;
  }

  75% {
    border-image: linear-gradient(to top, #003194, #00ffea) 1;
  }

  100% {
    border-image: linear-gradient(to right, #003194, #00ffea) 1;
  }
}

.reservoir-survey1 {


  width: 100%;
  color: #f0fafa;
  font-size: 16px;
  display: flex;
  flex-direction: column;


  .reservoir-top {
    height: 760px;
    background: rgba(0, 108, 188, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(0, 108, 188, 0.7);
    // background-color: #183c77;
    padding: 10px;
    // height: 600px;
    display: flex;
    flex-direction: column;
    .beautified-div {
      height: 220px;
      background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
      border: 1px solid #1da8d2; /* 边框颜色 */
      border-radius: 8px; /* 圆角 */
      padding: 15px 25px; /* 内边距 */
      margin: 5px; /* 外边距 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      font-size: 18px; /* 字体大小 */
      text-align: center; /* 文本居中 */
      transition: all 0.3s ease; /* 动画过渡 */
    }

  }

  .reservoir-top:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }


}
</style>