qa-regulatory-gwj-vue/src/views/map/components/fengongsi_index.vue

<template>
  <div class="fensongsi_index">
    <div class="block1">
      <layout-title title="气象监测数据"/>
      <div class="options">
        <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
          <div class="title">{{ item.title }}</div>
          <div class="circular">
            <img :src="item.img" alt="">
          </div>
          <div class="label">
            {{ item.count }}
          </div>
        </div>
      </div>
    </div>
    <div class="block2">
      <layout-title title="风险辨识管控"/>
      <div class="options">
        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
          <img :src="item.img" class="img_top" alt="">
          <img class="img_bottom" src="../../../assets/map/gangkou_index/bg1.png" alt="">
          <div class="label">{{ item.label }}</div>
          <div class="count">
            <count-to :start-val="0" :end-val="+riskIdentificationCount[index]" :duration="3600"/>
          </div>
        </div>
      </div>
    </div>
    <div class="block3">
      <layout-title title="人员定位信息"/>
      <div class="options">
        <div v-for="(item,index) in block3OptionsList" :key="index" class="option">
          <img :src="item.img" class="img_top" alt="">
          <img class="img_bottom" src="../../../assets/map/gangkou_index/img1.png" alt="">
          <div class="label">{{ item.label }}</div>
          <div class="count">
            <count-to :start-val="0" :end-val="item.count" :duration="3600"/>
          </div>
        </div>
      </div>
    </div>
    <div class="block4">
      <layout-title title="口门管理"/>
      <div class="options">
        <div v-for="(item,index) in doorManagementList" :key="index" class="option">
          <div class="title">{{ item.title }}</div>
          <div class="items">
            <div v-for="(item1,index1) in item.list" :key="index1" class="item">
              <div class="label">
                {{ item1.label }}：<count-to :start-val="0" :end-val="item.title == '今日情况' ? +item1.count : +item1.COUNT" :duration="3600"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import layoutTitle from './title.vue'
import CountTo from 'vue-count-to'
import { requestFN } from '@/utils/request'

export default {
  components: {
    layoutTitle,
    CountTo
  },
  props: {
    corpInfoId: {
      type: String,
      default: ''
    },
    gangkou: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      timer: '',
      value: 0,
      riskIdentificationCount: {},
      doorManagementList: [],
      block1OptionsList: [
        {
          title: '风速监测',
          img: require('../../../assets/map/qixiang/ico1.png'),
          count: '-'
        },
        {
          title: '温度监测',
          img: require('../../../assets/map/qixiang/ico2.png'),
          count: '-'
        },
        {
          title: '风向监测',
          img: require('../../../assets/map/qixiang/ico3.png'),
          count: '-'
        }
      ],
      block2OptionsList: [
        {
          label: '风险单元数',
          img: require('../../../assets/map/gangkou_index/ico1.png'),
          count: 0
        },
        {
          label: '辨识部位数',
          img: require('../../../assets/map/gangkou_index/ico2.png'),
          count: 0
        },
        {
          label: '风险因素数',
          img: require('../../../assets/map/gangkou_index/ico3.png'),
          count: 0
        }
      ],
      block3OptionsList: [
        {
          label: '企业人员数',
          img: require('../../../assets/map/gangkou_index/img1_on.png'),
          count: 0
        },
        {
          label: '部门数',
          img: require('../../../assets/map/gangkou_index/img2_on.png'),
          count: 0
        },
        {
          label: '定位在线人员数',
          img: require('../../../assets/map/gangkou_index/img3_on.png'),
          count: 0
        }
      ],
      block4OptionsList: [
        {
          title: '风险指数',
          list: [
            {
              label: '重大风险点数',
              count: '9'
            },
            {
              label: '较大风险点数',
              count: '20'
            },
            {
              label: '一般风险点数',
              count: '13'
            },
            {
              label: '低风险性点数',
              count: '3'
            }
          ]
        },
        {
          title: '今日情况',
          list: [
            {
              label: '今日进港人员数',
              count: '-'
            },
            {
              label: '今日出港人员数',
              count: '-'
            },
            {
              label: '今日进港车辆数',
              count: '-'
            },
            {
              label: '今日出港车辆数',
              count: '-'
            }
          ]
        }
      ]
    }
  },
  watch: {
    // 'corpInfoId': {
    //   handler(newVal, oldVal) {
    //     console.log('newVal')
    //     console.log(newVal)
    //     console.log('oldVal')
    //     console.log(oldVal)
    //   },
    //   immediate: false
    // }
  },
  created() {
    this.getRiskIdentificationCount()
    this.getPersonPositioningCount()
    this.getDoorManagement()
    this.start()
    this.getMeteorologicalinfo()
  },
  beforeDestroy() {
    console.log('定时器关闭')
    clearInterval(this.timer)
  },
  methods: {
    // 天气数据
    getMeteorologicalinfo() {
      this.listLoading = true
      requestFN(
        '/map/listbymeteorological',
        {
          CORPINFO_ID: this.corpInfoId,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.listLoading = false
        this.block1OptionsList[0].count = data.pd.WINDSPEED || '-'
        this.block1OptionsList[1].count = data.pd.TEMPERATURE || '-'
        this.block1OptionsList[2].count = this.calculateWindDirection(data.pd.WINDDIRECTION)
        // this.block1OptionsList[3].count = data.pd.HUMIDITY || '-'
      }).catch((e) => {
        this.listLoading = false
      })
    },
    calculateWindDirection(angle) {
      const arr = [
        {
          directions: '北',
          minAngle: '348.76',
          maxAngle: '11.25'
        },
        {
          directions: '北东北',
          minAngle: '11.26',
          maxAngle: '33.75'
        },
        {
          directions: '东北',
          minAngle: '33.76',
          maxAngle: '56.25'
        },
        {
          directions: '东东北',
          minAngle: '56.26',
          maxAngle: '78.75'
        },
        {
          directions: '东',
          minAngle: '78.76',
          maxAngle: '101.25'
        },
        {
          directions: '东东南',
          minAngle: '101.26',
          maxAngle: '123.75'
        },
        {
          directions: '东南',
          minAngle: '123.76',
          maxAngle: '146.25'
        },
        {
          directions: '南东南',
          minAngle: '146.26',
          maxAngle: '168.75'
        },
        {
          directions: '南',
          minAngle: '168.76',
          maxAngle: '191.25'
        },
        {
          directions: '南西南',
          minAngle: '191.26',
          maxAngle: '213.75'
        },
        {
          directions: '西南',
          minAngle: '213.76',
          maxAngle: '236.25'
        },
        {
          directions: '西西南',
          minAngle: '236.26',
          maxAngle: '258.75'
        },
        {
          directions: '西',
          minAngle: '258.76',
          maxAngle: '281.25'
        },
        {
          directions: '西西北',
          minAngle: '281.26',
          maxAngle: '303.75'
        },
        {
          directions: '西北',
          minAngle: '303.76',
          maxAngle: '326.25'
        },
        {
          directions: '北西北',
          minAngle: '326.26',
          maxAngle: '348.75'
        }
      ]
      for (let i = 0; i < arr.length; i++) {
        if (+angle >= +arr[i].minAngle && +angle <= +arr[i].maxAngle) {
          return arr[i].directions + '风'
        }
      }
      return '静风'
    },
    // 定时器
    start() {
      console.log('定时器开启')
      this.timer = setInterval(this.getMeteorologicalinfo, 10000) // 注意: 第一个参数为方法名的时候不要加括号;
    },
    over() {
      clearInterval(this.timer)
    },

    getDoorManagement() {
      requestFN(
        '/map/getDoorManagement',
        {
          CORPINFO_ID: this.corpInfoId,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.doorManagementList = data.varList
      })
    },
    getRiskIdentificationCount() {
      requestFN(
        '/map/getRiskIdentificationCount',
        {
          CORPINFO_ID: this.corpInfoId,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.riskIdentificationCount = data.riskIdentificationCount
      })
    },
    getPersonPositioningCount() {
      requestFN(
        '/map/getPersonPositioningCount',
        {
          CORPINFO_ID: this.corpInfoId,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.block3OptionsList[0].count = data.personPositioningCount[0]
        this.block3OptionsList[1].count = data.personPositioningCount[1]
        this.block3OptionsList[2].count = data.personPositioningCount[2]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fensongsi_index {
  .block1 {
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .options {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;

      .option {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          background-image: url("../../../assets/map/qixiang/label.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 88px;
          height: 25px;
          font-size: 12px;
          line-height: 25px;
          text-align: center;
          color: #fff;
        }

        .circular {
          margin-top: 15px;
          background-image: url("../../../assets/map/qixiang/imgbg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 67px;
          height: 48px;
          text-align: center;
          padding-top: 13px;

          img {
            width: 30px;
            height: 30px;
            margin-top: -20px;
            animation: slideY 2s infinite;
          }
        }

        .label {
          margin-top: 5px;
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }

  .block2 {
    margin-top: 10px;
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .options {
      display: flex;
      justify-content: space-between;
      padding: 10px 40px;
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;

      .option {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .img_top {
          position: absolute;
          width: 25px;
          height: 25px;
          margin-top: 11px;
          animation: slideY 2s infinite;
        }

        .img_bottom {
          position: absolute;
          width: 50px;
          height: 50px;
        }

        .label {
          margin-top: 60px;
          color: #fff;
          font-size: 14px;
        }

        .count {
          background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: bold;
          font-size: 26px;
          margin-top: 0px;
          font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
        }
      }
    }
  }

  .block3 {
    margin-top: 10px;
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .options {
      display: flex;
      justify-content: space-between;
      padding: 0 40px 10px 40px;
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;

      .option {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .img_top {
          position: absolute;
          width: 75px;
          height: 75px;
          animation: slideY 2s infinite;
        }

        .img_bottom {
          position: absolute;
          width: 75px;
          height: 75px;
          top: 5px;
        }

        .label {
          margin-top: 80px;
          color: #fff;
          font-size: 14px;
        }

        .count {
          background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: bold;
          font-size: 26px;
          margin-top: 0px;
          font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
        }
      }
    }
  }

  .block4 {
    margin-top: 10px;
    width: 410px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .options {
      padding: 10px 15px 10px 15px;
      border: 1px solid;
      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
      border-top: none;

      .option {
        .title {
          background-image: url("../../../assets/map/menjin/title.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 113px;
          height: 26px;
          font-size: 14px;
          line-height: 26px;
          text-align: center;
          color: #fff;

        }

        .items {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;

          .item {
            margin-top: 10px;
            font-size: 12px;
            color: #fff;
            flex-basis: 50%;
          }
        }
      }
    }
  }
}

@keyframes slideY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>