1、设备详情显示修改 2、监测因子对比改成监测因子相关性对比 3、监测因子相关性对比显示修改

guoshipeng

2023-04-12 46b328deebfc604ecfe6e34afe08403d95356614

 src/views/deviceDetail/index.vue

@@ -3,88 +3,242 @@
    :style="{
      color: '#fff',
      backgroundSize: 'cover',
      backgroundImage:
        'url(' + require('../../assets/images/sixBg2.jpg') + ')',
      height:'100%'
      backgroundImage: 'url(' + require('../../assets/images/sixBg2.jpg') + ')',
      height: '100%',
    }"
  >
    <el-aside width="31%">
      <el-main style="display:flex;flex-flow: column;height: 100%;padding-left: 0;padding-right: 0;margin-left:10px">
      <el-main
        style="
          display: flex;
          flex-flow: column;
          height: 100%;
          padding-left: 0;
          padding-right: 0;
          margin-left: 10px;
        "
      >
        <div
          class="left0"
          :style="{display:'flex',flexDirection:'column',alignContent:'center',flex:'1',padding: '0 20px 10px 20px'}"
          :style="{
            display: 'flex',
            flexDirection: 'column',
            alignContent: 'center',
            flex: '1',
            padding: '0 20px 10px 20px',
          }"
        >
          <h3 style="text-align:center;font-size: 0.9rem">{{ currentTime }}</h3>
          <h3 style="text-align: center; font-size: 0.9rem">
            {{ currentTime }}
          </h3>
          <!-- <div v-for="(val,key,i) in wsData2" v-if="i!=='name'&&i!=='address'" :key="i" style="flex:1;display:flex"> -->
          <!-- 左侧列表数组 -->
          <div v-for="(val,key,i) in defaultMonitorItems" :key="i" style="flex:1;display:flex">
            <span style="width:33%;font-size: 0.9rem">{{ val.sensorCode |sensorFilter }}</span>
            <span style="width: 33%;height: 0.9rem;font-size: 0.9rem"><el-progress :text-inside="true" :percentage="val.alarm" :color="val.colour" style="width:100%" /></span>
            <span style="width:34%;text-align:right;font-size: 0.9rem">{{ val.value }}</span>
<!--            <span><el-progress v-if="val.alarm" :text-inside="true" :stroke-width="15" :percentage="val.alarm>100?100:val.alarm" :color="val.colour" style="width:150px" /></span>
          <div
            v-for="(val, key, i) in defaultMonitorItems"
            :key="i"
            style="flex: 1; display: flex"
            
          >
            <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{
              val.sensorCode | sensorFilter
            }}</span>
            <span style="width: 33%; height: 0.9rem; font-size: 0.9rem"
              ><el-progress
                :text-inside="true"
                :percentage="val.alarm"
                :color="val.colour"
                style="width: 100%"
            /></span>
            <span style="width: 34%; text-align: right; font-size: 0.9rem">{{
              val.value
            }}</span>
            <!--            <span><el-progress v-if="val.alarm" :text-inside="true" :stroke-width="15" :percentage="val.alarm>100?100:val.alarm" :color="val.colour" style="width:150px" /></span>
            <span style="width:50%;text-align:right">{{ val.value }}</span>-->
          </div>
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="0" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="50" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="33" status="success" /><span>mg/m³</span> </div>   :stroke-width="15"-->
        </div>
        <div class="border-top" style="height:150px;display:flex;margin-top:10px">
        <div
          class="border-top"
          style="height: 150px; display: flex; margin-top: 10px"
        >
          <!-- 左下角风向数组 -->
          <div v-if="wsData2 && wsData2.a01008" class="border-right left1" style="display:flex;flex:1;justify-content: space-around;align-items: center">
            <div style="position:relative">
          <div
            v-if="wsData2 && wsData2.a01008"
            class="border-right left1"
            style="
              display: flex;
              flex: 1;
              justify-content: space-around;
              align-items: center;
            "
          >
            <div style="position: relative">
              <img style="width: 5.5rem; height: 5.5rem" :src="compassBg" />
              <img
                style="width: 5.5rem; height: 5.5rem"
                :src="compassBg"
              >
              <img
                style="font-size:2rem;width: 2rem; height: 2rem;position: absolute;left: 0;top: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);"
                style="
                  font-size: 2rem;
                  width: 2rem;
                  height: 2rem;
                  position: absolute;
                  left: 0;
                  top: 0;
                  margin-left: 50%;
                  margin-top: 50%;
                  transform: translate(-50%, -50%);
                "
                :src="compassDirection"
                :style="{transform:'translate(-50%, -50%) rotate('+ windDeg +'deg)'}"
              >
                :style="{
                  transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
                }"
              />
            </div>
            <div style="text-align:center;font-size:1rem">
            <div style="text-align: center; font-size: 1rem">
              <div>{{ windDir }}</div>
              <div style="margin-top:15px">{{ wsData2? wsData2.a01008:'无数据' }}</div>
              <div style="margin-top: 15px">
                {{ wsData2 ? wsData2.a01008 : '无数据' }}
              </div>
            </div>
          </div>
          <div
            class="left2"
            style="flex: 1 1 0%;text-align: center;display: flex;flex-direction: column;justify-content: center"
            style="
              flex: 1 1 0%;
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <div style="font-size:0.9rem">空气质量指数(小时平均)</div>
            <div style="font-size:1.5rem;margin-top:7px">
              {{ aqi }}<span style="font-size:0.8rem">(AQI)</span>
            <div style="font-size: 0.9rem">空气质量指数(小时平均)</div>
            <div style="font-size: 1.5rem; margin-top: 7px">
              {{ aqi }}<span style="font-size: 0.8rem">(AQI)</span>
            </div>
          </div>
        </div>
      </el-main>
    </el-aside>
    <el-container class="border-left border-right" style="margin: 0 10px;">
      <el-header class="title0" style="text-align:center;display:unset!important;margin-top:10px;"><h1 style="text-align:center;text-align: center;margin: 0;padding-top: 20px;font-size: 1.2rem" @click="websocketData()">{{ deviceName? deviceName:'停机' }}</h1></el-header>
      <el-main style="padding-left:0;padding-right:0;padding-top:0;display: flex;flex-direction: column;" class="noneScoll">
        <div class="middle0" style="padding: 20px 0;margin-bottom: 10px;height:50%;min-height:394px">
          <div style="display:flex;flex-flow: row wrap;height:356px">
    <el-container class="border-left border-right" style="margin: 0 10px">
      <el-header
        class="title0"
        style="text-align: center; display: unset !important; margin-top: 10px"
        ><h1
          style="
            text-align: center;
            text-align: center;
            margin: 0;
            padding-top: 20px;
            font-size: 1.2rem;
          "
          @click="websocketData()"
        >
          {{ deviceName ? deviceName : '停机' }}
        </h1></el-header
      >
      <el-main
        style="
          padding-left: 0;
          padding-right: 0;
          padding-top: 0;
          display: flex;
          flex-direction: column;
        "
        class="noneScoll"
      >
        <div
          class="middle0"
          style="
            padding: 20px 0;
            margin-bottom: 10px;
            height: 50%;
            min-height: 394px;
          "
        >
          <div style="display: flex; flex-flow: row wrap; height: 356px">
            <!-- 中间核心数组 -->
            <div v-for="(val,key,i) in coreMonitorItems" :key="i" style="position: relative;width:33%;height: 50%;font-size: 0.9rem" class="circleWH" ref='test'>
<!--              <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
              <div style="position: relative;width: 75%;height:80%;margin: 0px auto;background-size: contain;background-position:center" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">
            <div
              v-for="(val, key, i) in coreMonitorItems"
              :key="i"
              style="
                position: relative;
                width: 33%;
                height: 50%;
                font-size: 0.9rem;
              "
              class="circleWH"
              ref="test"
            >
              <!--              <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
              <div
                style="
                  position: relative;
                  width: 75%;
                  height: 80%;
                  margin: 0px auto;
                  background-size: contain;
                  background-position: center;
                "
                :class="{
                  alarmBg5: val.bg === 5,
                  alarmBg4: val.bg === 4,
                  alarmBg3: val.bg === 3,
                  alarmBg2: val.bg === 2,
                  alarmBg1: val.bg === 1,
                  alarmBg0: val.bg === 0,
                }"
              >
                <!-- <img :src="{alarmBg5:val.bg === 5,alarmBg4:val.bg === 4,alarmBg3:val.bg === 3,alarmBg2:val.bg === 2,alarmBg1:val.bg === 1,alarmBg0:val.bg === 0}" alt="" style="display: block;margin: 0 auto;"> -->
<!--                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>-->
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>
                <!--                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>-->
                <div
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    text-align: center;
                  "
                >
                  {{ val.value ? val.value : '无数据' }}
                </div>
              </div>
              <div style="text-align:center;padding-top:5px">{{ val.sensorCode |sensorFilter }}</div>
              <div
                style="text-align: center; padding-top: 5px"
                @click="chuan2(val)"
              >
                {{ val.sensorCode | sensorFilter }}
              </div>
            </div>
          </div>
        </div>
        <div class="border-top" style="display:flex;height:50%">
          <div ref="main" class="middle1" style="flex:1;padding-top:30px" />
        <div class="border-top" style="display: flex; height: 50%">
          <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" />
          <!-- <line-chart :chart-data="lineChartData" /> -->
          <div class="border-left middle2" style="width: 11rem;text-align:center;padding-top:50px;margin-left:10px">
          <div
            class="border-left middle2"
            style="
              width: 11rem;
              text-align: center;
              padding-top: 50px;
              margin-left: 10px;
            "
          >
            <h3 style="font-size: 0.9rem">本月平均值</h3>
            <div>
              <div style="font-size: 0.9rem">非甲烷总烃</div>
              <div style="padding:8px 0 0;font-size:2.3rem;font-weight:bold">{{ average }}</div>
              <div style="text-align:right;padding-right:10px;font-size: 0.9rem">(ppm)</div>
              <div style="font-size: 0.9rem">{{ chartSensorName }}</div>
              <div
                style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold"
              >
                {{ average }}
              </div>
              <div
                style="
                  text-align: right;
                  padding-right: 10px;
                  font-size: 0.9rem;
                "
              ></div>
            </div>
          </div>
        </div>
@@ -92,36 +246,85 @@
    </el-container>
    <el-aside width="21%">
      <el-main
        style="padding-left:0;padding-right:0;display: flex;flex-direction: column;margin-right:10px;overflow:hidden"
        style="
          padding-left: 0;
          padding-right: 0;
          display: flex;
          flex-direction: column;
          margin-right: 10px;
          overflow: hidden;
        "
      >
        <div class="border-bottom right0" style="text-align: center;padding-bottom: 25px;margin-bottom:10px;height: 60%">
          <div style="height:100%;display: flex;flex-direction: column;">
            <div style="height:30%">
              <h3 style="text-align:center;font-size: 0.9rem" v-if="macLat"><span>坐标：</span>  {{ macLat }}, {{ macLng }}</h3>
        <div
          class="border-bottom right0"
          style="
            text-align: center;
            padding-bottom: 25px;
            margin-bottom: 10px;
            height: 60%;
          "
        >
          <div style="height: 100%; display: flex; flex-direction: column">
            <div style="height: 30%">
              <h3 style="text-align: center; font-size: 0.9rem" v-if="macLat">
                <span>坐标：</span> {{ macLat }}, {{ macLng }}
              </h3>
              <h3 style="font-size: 0.9rem">实时监测超标预警</h3>
            </div>
            <div style="height:70%">
<!--              padding-top: 4%-->
              <img style="" :src="url1" alt="" style="width:70%">
            <div style="height: 70%">
              <!--              padding-top: 4%-->
              <img :src="url1" alt="" style="width: 70%" />
            </div>
            <div>
              <img style="width: 75%" :src="url2" alt="">
              <img style="width: 75%" :src="url2" alt="" />
            </div>
          </div>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-if="monitorPointInfo">
          <h3 style="text-align:center; font-size: 0.9rem">设备列表</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10% 10% 10%;font-size: 0.9rem; margin-top: 0">
            <li v-for="(v,i) in monitorPointInfo.devices" :key="i" class="listLi" :class="{liActive:libg==i}" @click="reMac(v.mac,i,v.name)">{{ v.name }}</li>
        <div
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-if="monitorPointInfo"
        >
          <h3 style="text-align: center; font-size: 0.9rem">设备列表</h3>
          <ul
            class="listUl"
            style="
              overflow: auto;
              padding: 0 10% 10% 10%;
              font-size: 0.9rem;
              margin-top: 0;
            "
          >
            <li
              v-for="(v, i) in monitorPointInfo.devices"
              :key="i"
              class="listLi"
              :class="{ liActive: libg == i }"
              @click="reMac(v.mac, i, v.name)"
            >
              {{ v.name }}
            </li>
          </ul>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-else>
          <h3 style="text-align:center; font-size: 0.9rem">标准值</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10%;font-size: 0.9rem; margin-top: 0">
        <div
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-else
        >
          <h3 style="text-align: center; font-size: 0.9rem">标准值</h3>
          <ul
            class="listUl"
            style="
              overflow: auto;
              padding: 0 10%;
              font-size: 0.9rem;
              margin-top: 0;
            "
          >
            <li>PM2.5: &nbsp;[ 0, 35 ]</li>
            <li>PM10: &nbsp;&nbsp;[ 0, 50 ]</li>
            <li>NO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 40 ]</li>
            <li>SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 50 ]</li>
            <li>SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 150 ]</li>
            <li>CO: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 2 ]</li>
            <li>O3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 160 ]</li>
          </ul>
@@ -138,20 +341,21 @@
import json from '@/assets/json/sensor.json'
// import { parse } from 'path-to-regexp'
// import LineChart from '@/components/Echarts/LineChart'
// import draggable from 'vuedraggable'
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {
    // LineChart
    // draggable
  },
  filters: {
    // 过滤器替换websocket实时数据的key值
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
  },
  props: {},
  data() {
    // 这里存放数据
    return {
@@ -160,7 +364,7 @@
      url2: require('@/assets/images/alarmstate-1.png'),
      bg: {
        backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
        backgroundRepeat: 'round'
        backgroundRepeat: 'round',
      },
      wsData1: null,
      wsData2: null,
@@ -184,27 +388,12 @@
      // 报警等级
      alarmLevel: null,
      alarmLevelDome: {
        a00e12: '[10000, 15000, 20000]',
        a00e13: '[60, 90, 120]',
        a00e34: null,
        a35e21: null,
        a01001: '[25, 30, 60]',
        a01002: '[60, 100, 160]',
        a01006: null,
        a01007: '[5, 6, 8]',
        a01008: null,
        a05024: '[160, 200, 300, 400, 800]',
        a06001: null,
        a19002: null,
        a21004: '[100, 200, 700, 1200, 2340]',
        a21005: '[5, 10, 35, 60, 90]',
        a21026: '[150, 500, 650, 800, 1600]',
        a34002: '[50, 150, 250, 350, 420]',
        a34004: '[35, 75, 115, 150, 250]',
        a99054: '[1.5, 3, 5]',
        dustld: null,
        flylat: null,
        flylon: null
        a05024: '[0, 160, 200, 300, 400, 800]', //臭氧
        a21004: '[0, 100, 200, 700, 1200, 2340]', //二氧化氮
        a21005: '[0, 5, 10, 35, 60, 90]', //一氧化碳
        a21026: '[0, 150, 500, 650, 800, 1600]', //二氧化硫
        a34002: '[0, 50, 150, 250, 350, 420]', //PM10
        a34004: '[0, 35, 75, 115, 150, 250]', //PM2.5
      }, // 假设报警等级
      // 报警进度条
      alarmProgress: {},
@@ -231,6 +420,7 @@
      alarmBg0: require('@/assets/images/level0_circle0.gif'),
      deviceName: '',
      chartSensorKey: [],
      chartSensor1: '',
      coreMonitorItems: [],
      defaultMonitorItems: [],
      fixedMonitorItems: [],
@@ -243,15 +433,15 @@
        CO2: '',
        SO2: '',
        CO: '',
        O3: ''
      }
        O3: '',
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {
    leftaSide() {
      return this.$store.state.leftaSide
    }
    },
  },
  // 监控data中的数据变化
  watch: {
@@ -263,7 +453,7 @@
      // this.myChart.resize()
      this.myChart = null
      // this.drawChart()
    }
    },
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
@@ -289,7 +479,7 @@
    this.websocketData()
    this.getkeyName()
    this.getHourlyAqi()
    this.getSensorMonthAvg()
    // this.getSensorMonthAvg()
    this.$watch('chartSensorKey', () => {
      this.filterSensorName()
    })
@@ -327,6 +517,24 @@
  activated() {},
  // 方法集合
  methods: {
    chuan(val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
      this.getSensorMonthAvg()
      this.PM2_5Data = []
      this.filterSensorName()
      // console.log(this.chartSensorKey[0].sensorCode);
      // console.log(this.chartSensorKey)
    },
    chuan2(val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
      this.getSensorMonthAvg()
      this.PM2_5Data = []
      this.filterSensorName()
    },
    // 修改圆圈的宽高
    getCircleWH() {
      // var circleWHList = document.getElementsByClassName('circleWH')
@@ -337,7 +545,9 @@
    },
    // 过滤图表因子名称
    filterSensorName() {
      this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
      this.chartSensorName = this.$options.filters.sensorFilter(
        this.chartSensorKey[0].sensorCode
      )
    },
    // 因子布局接口
    sensorLayout() {
@@ -346,55 +556,63 @@
          url: '/organizationLayout/getLayoutByMac',
          method: 'get',
          params: {
            mac: this.macName
          }
            mac: this.macName,
          },
        })
          .then(res => {
            // console.log('因子布局接口')
            // console.log(res)
          .then((res) => {
            console.log(res, '因子布局接口')
            this.chartSensorKey = res.data.chartSensorKey
            this.coreMonitorItems = res.data.coreMonitorItems
            this.defaultMonitorItems = res.data.defaultMonitorItems
            this.fixedMonitorItems = res.data.fixedMonitorItems
            this.totalArray.push(...this.chartSensorKey, ...this.coreMonitorItems, ...this.defaultMonitorItems, ...this.fixedMonitorItems)
            this.totalArray.push(
              ...this.chartSensorKey,
              ...this.coreMonitorItems,
              ...this.defaultMonitorItems,
              ...this.fixedMonitorItems
            )
            this.getSensorMonthAvg()
            resolve()
          })
          .catch(err => {
          .catch((err) => {
            console.log(err)
          })
      })
    },
    // 调用污染程度接口
    getAlarmLevels() {
      this.$axios.get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
        params: {
          mac: this.macName,
          primaryKey: this.macName
        }
      }).then((res) => {
        this.alarmLevels = res.data
        // console.log('以下是alarm-levels的返回')
        // console.log(this.alarmLevels)
      }).catch((err) => {
        console.log(err)
      })
      this.$axios
        .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
          params: {
            mac: this.macName,
            primaryKey: this.macName,
          },
        })
        .then((res) => {
          this.alarmLevels = res.data
          // console.log('以下是alarm-levels的返回')
          // console.log(this.alarmLevels)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获得实时日期更新
    getTime() {
      var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function() {
      this.timer = setInterval(function () {
        _this.currentTime = // 修改数据date
        _this.appendZero(new Date().getFullYear()) +
        '-' +
        _this.appendZero((new Date().getMonth() + 1)) +
        '-' +
        _this.appendZero(new Date().getDate()) +
        ' ' +
        _this.appendZero(new Date().getHours()) +
        ': ' +
        _this.appendZero(new Date().getMinutes()) +
        ': ' +
        _this.appendZero(new Date().getSeconds())
          _this.appendZero(new Date().getFullYear()) +
          '-' +
          _this.appendZero(new Date().getMonth() + 1) +
          '-' +
          _this.appendZero(new Date().getDate()) +
          ' ' +
          _this.appendZero(new Date().getHours()) +
          ': ' +
          _this.appendZero(new Date().getMinutes()) +
          ': ' +
          _this.appendZero(new Date().getSeconds())
      }, 1000)
    },
    appendZero(obj) {
@@ -431,15 +649,18 @@
        url: '/deviceInfo/getHourlyAqi',
        method: 'get',
        params: {
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是getHourlyAqi请求的返回')
        // console.log(res)
        this.aqi = res.data.AQI
      }).catch((err) => {
        console.log(err)
          mac: this.macName,
        },
      })
        .then((res) => {
          // console.log('以下是getHourlyAqi请求的返回')
          // console.log(res)
          this.aqi = res.data.AQI
        })
        .catch((err) => {
          // console.log(this.chartSensorKey[0].sensorCode);
          console.log(err)
        })
    },
    // 请求单台设备某参数月平均值
    getSensorMonthAvg() {
@@ -447,16 +668,19 @@
        url: '/deviceInfo/getMonthAvg',
        method: 'get',
        params: {
          sensorCode: 'a24088',
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是sensorMonthAvg请求的返回')
        // console.log(res)
        this.average = res.data.avg
      }).catch((err) => {
        console.log(err)
          sensorCode: this.chartSensorKey[0].sensorCode,
          mac: this.macName,
        },
      })
        .then((res) => {
          // console.log(res,'123');
          // console.log('以下是sensorMonthAvg请求的返回')
          // console.log(res)
          this.average = res.data.avg
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 因子报警值排序
    alarmSort() {
@@ -489,28 +713,37 @@
        // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
        // socketUrl = 'http://192.168.0.4:8081/singleDevice/' + this.macName
      }
      // 替换http为WS
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

      this.ws = new WebSocket(socketUrl)

      this.ws.onopen = function() {
      this.ws.onopen = function () {
        console.log('websocket开启成功')
      }
      console.log(2)
      // this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
      // 获得消息事件
      this.ws.onmessage = function(msg) {
      this.ws.onmessage = function (msg) {
        // console.log(1);
        // if (JSON.parse(msg.data).名称) {
        that.wsData2 = JSON.parse(msg.data)
        // console.log(msg.data, 'data2')
        // that.wsData2.on('click',function (params) {
        //     console.log(params);
        // })
        if (that.wsData2.dustld) {
          that.wsData2.dustld = that.wsData2.dustld.replace(/g/, 'ug')
        }
        // console.log('以下是websocket返回数据')
        // console.log(that.wsData2)
        // console.log(that.wsData2, '0')
        // 风向算法
        if (that.wsData2.a01008) {
          var windDirs = Number(that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1))
          var windDirs = Number(
            that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1)
          )
          // console.log(windDirs)
          that.windDeg = windDirs
          if (windDirs === 0) {
@@ -536,26 +769,46 @@
        that.alarmBg = {}
        // 报警等级
        for (const key in that.wsData2) {
          if (that.chartSensorKey && key === that.chartSensorKey[0].sensorCode) {
          // console.log(key,'key');
          if (
            that.chartSensorKey &&
            key === that.chartSensorKey[0].sensorCode
          ) {
            // console.log(that.wsData2[key],'kk');
            that.chartSensorKey[0].value = that.wsData2[key]
          }
          // console.log(that.alarmLevel, 'that.alarmLevel')
          for (const keys in that.alarmLevel) {
            // 遍历进度条颜色
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
              if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[5])) {
                that.alarmColour[keys] = '#9f012f'
              if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[5])
              ) {
                that.alarmColour[keys] = '#000000'
                that.alarmBg[keys] = 5
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[4])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[4])
              ) {
                that.alarmColour[keys] = '#c00261'
                that.alarmBg[keys] = 4
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[3])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[3])
              ) {
                that.alarmColour[keys] = '#fc0101'
                that.alarmBg[keys] = 3
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[2])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[2])
              ) {
                that.alarmColour[keys] = '#ff8202'
                that.alarmBg[keys] = 2
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[1])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[1])
              ) {
                that.alarmColour[keys] = '#fdff00'
                that.alarmBg[keys] = 1
              } else {
@@ -569,22 +822,46 @@
            // 遍历进度条百分比
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
              if (JSON.parse(that.alarmLevel[keys])[5]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[5]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[5])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[4]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[4]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[4])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[3]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[3]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[3])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[2]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[2]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[2])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[1]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[1]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[1])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[0]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[0]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[0])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              }
            } else if (key === keys) {
@@ -600,7 +877,9 @@
          for (const key in that.wsData2) {
            if (key !== 'time') {
              // 获取数据的小数
              var tempDecimal = that.wsData2[key].replace(/[^\d.]/g, '').split('.')[1]
              var tempDecimal = that.wsData2[key]
                .replace(/[^\d.]/g, '')
                .split('.')[1]
              if (that.totalArray[i].sensorCode === key) {
                // 臭气和湿度保留整数
                if (that.totalArray[i].sensorCode === 'a19002') {
@@ -608,8 +887,13 @@
                } else if (that.totalArray[i].sensorCode === 'a01002') {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + '%'
                  // 除了TVOCQ其他因子数据小数是零的就去掉小数
                } else if (that.totalArray[i].sensorCode !== 'a99054' && Number(tempDecimal) === 0) {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + that.wsData2[key].split(' ')[1]
                } else if (
                  that.totalArray[i].sensorCode !== 'a99054' &&
                  Number(tempDecimal) === 0
                ) {
                  that.totalArray[i].value =
                    parseInt(that.wsData2[key]) +
                    that.wsData2[key].split(' ')[1]
                } else {
                  that.totalArray[i].value = that.wsData2[key]
                }
@@ -655,83 +939,115 @@
        // 判断PM2.5的超标预警
        if (e1Data > 250) {
          that.e1Bg = require('@/assets/images/level0_circle5.gif')
          that.coreMonitorItems[0].bg=5
        } else if (e1Data > 150) {
          that.coreMonitorItems[0].bg=4
          that.e1Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e1Data > 115) {
          that.coreMonitorItems[0].bg=3
          that.e1Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e1Data > 75) {
          that.coreMonitorItems[0].bg=2
          that.e1Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e1Data > 35) {
          that.coreMonitorItems[0].bg=1
          that.e1Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          // console.log(that.coreMonitorItems[0].bg,'bg');
          // that.coreMonitorItems[0].bg=1
          that.e1Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断PM10的超标预警
        if (e2Data > 420) {
          that.coreMonitorItems[1].bg=5
          that.e2Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e2Data > 350) {
          that.coreMonitorItems[1].bg=4
          that.e2Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e2Data > 250) {
          that.coreMonitorItems[1].bg=3
          that.e2Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e2Data > 150) {
          that.coreMonitorItems[1].bg=2
          that.e2Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e2Data > 50) {
          that.coreMonitorItems[1].bg=1
          that.e2Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e2Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断CO的超标预警
        if (e10Data > 90) {
          that.coreMonitorItems[3].bg=5
          that.e10Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e10Data > 60) {
          that.coreMonitorItems[3].bg=4
          that.e10Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e10Data > 35) {
          that.coreMonitorItems[3].bg=3
          that.e10Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e10Data > 10) {
          that.coreMonitorItems[3].bg=2
          that.e10Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e10Data > 5) {
          that.coreMonitorItems[3].bg=1
          that.e10Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e10Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断SO2的超标预警
        if (e11Data > 90) {
        if (e11Data > 1600) {
          that.coreMonitorItems[4].bg=5
          that.e11Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e11Data > 60) {
        } else if (e11Data > 800) {
          that.coreMonitorItems[4].bg=4
          that.e11Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e11Data > 35) {
        } else if (e11Data > 650) {
          that.coreMonitorItems[4].bg=3
          that.e11Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e11Data > 10) {
        } else if (e11Data > 500) {
          that.coreMonitorItems[4].bg=2
          that.e11Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e11Data > 5) {
        } else if (e11Data > 150) {
          that.coreMonitorItems[4].bg=1
          that.e11Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e11Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断O3的超标预警
        if (e15Data > 800) {
          that.coreMonitorItems[5].bg=5
          that.e15Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e15Data > 400) {
          that.coreMonitorItems[5].bg=4
          that.e15Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e15Data > 300) {
          that.coreMonitorItems[5].bg=3
          that.e15Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e15Data > 200) {
          that.coreMonitorItems[5].bg=2
          that.e15Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e15Data > 160) {
          that.coreMonitorItems[5].bg=1
          that.e15Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e15Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断NO2的超标预警
        if (e16Data > 2340) {
          that.coreMonitorItems[2].bg=5
          that.e16Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e16Data > 1200) {
          that.coreMonitorItems[2].bg=4
          that.e16Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e16Data > 700) {
          that.coreMonitorItems[2].bg=3
          that.e16Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e16Data > 200) {
          that.coreMonitorItems[2].bg=2
          that.e16Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e16Data > 100) {
          that.coreMonitorItems[2].bg=1
          that.e16Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e16Bg = require('@/assets/images/level0_circle0.gif')
@@ -739,29 +1055,48 @@
        // 判断实时监测超标预警
        for (const key in that.wsData2) {
          // 右侧报警背景图
          for (const keys in that.alarmLevel) {
          for (const keys in that.alarmLevelDome) {
            // console.log(that.wsData2,'11');
            // console.log(keys,'keys');
            var alarmLevel = {}
            alarmLevel[keys] = JSON.parse(that.alarmLevel[keys])
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
            alarmLevel[keys] = JSON.parse(that.alarmLevelDome[keys])
            // console.log(alarmLevel[keys],'111');
            if (key === keys && JSON.parse(that.alarmLevelDome[keys])) {
              // console.log(key, 'kk')
              const wsData2KeyData = parseInt(that.wsData2[key])
              // console.log(that.wsData2[key],'22');
              const alarmLevelsData0 = alarmLevel[keys][0]
              const alarmLevelsData1 = alarmLevel[keys][1]
              const alarmLevelsData2 = alarmLevel[keys][2]
              const alarmLevelsData3 = alarmLevel[keys][3]
              const alarmLevelsData4 = alarmLevel[keys][4]
              const alarmLevelsData5 = alarmLevel[keys][5]

              if (wsData2KeyData > alarmLevelsData5) {
                that.alarmLevelsStatus = 5
              } else if (wsData2KeyData > alarmLevelsData4 && that.alarmLevelsStatus < 5) {
              } else if (
                wsData2KeyData > alarmLevelsData4 &&
                that.alarmLevelsStatus < 5
              ) {
                that.alarmLevelsStatus = 4
              } else if (wsData2KeyData > alarmLevelsData3 && that.alarmLevelsStatus < 4) {
              } else if (
                wsData2KeyData > alarmLevelsData3 &&
                that.alarmLevelsStatus < 4
              ) {
                that.alarmLevelsStatus = 3
              } else if (wsData2KeyData > alarmLevelsData2 && that.alarmLevelsStatus < 3) {
              } else if (
                wsData2KeyData > alarmLevelsData2 &&
                that.alarmLevelsStatus < 3
              ) {
                that.alarmLevelsStatus = 2
              } else if (wsData2KeyData > alarmLevelsData1 && that.alarmLevelsStatus < 2) {
              } else if (
                wsData2KeyData > alarmLevelsData1 &&
                that.alarmLevelsStatus < 2
              ) {
                that.alarmLevelsStatus = 1
              } else if (wsData2KeyData > alarmLevelsData0 && that.alarmLevelsStatus < 1) {
              } else if (
                wsData2KeyData > alarmLevelsData0 &&
                that.alarmLevelsStatus < 1
              ) {
                that.alarmLevelsStatus = 0
              }
              switch (that.alarmLevelsStatus) {
@@ -771,15 +1106,15 @@
                  break
                case 1:
                  that.url1 = require('@/assets/images/alarmlevel1.gif')
                  that.url2 = require('@/assets/images/alarmstate1.png')
                  that.url2 = require('@/assets/images/alarmstate11.png')
                  break
                case 2:
                  that.url1 = require('@/assets/images/alarmlevel2.gif')
                  that.url2 = require('@/assets/images/alarmstate2.png')
                  that.url2 = require('@/assets/images/alarmstate22.png')
                  break
                case 3:
                  that.url1 = require('@/assets/images/alarmlevel3.gif')
                  that.url2 = require('@/assets/images/alarmstate3.png')
                  that.url2 = require('@/assets/images/alarmstate33.png')
                  break
                case 4:
                  that.url1 = require('@/assets/images/alarmlevel4.gif')
@@ -865,28 +1200,31 @@
        url: '/deviceInfo/queryAlarmByMac',
        method: 'get',
        params: {
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是queryAlarmByMac请求的返回')
        this.alarmLevel = res.data.alarmLevel
        // var levelList = res.data.alarmLevel
        // var info = false
        // for (let key in levelList) {
        //   if (levelList[key] !== null) {
        //     info = true
        //     break
        //   }
        // }
        // if (info) {
        //   this.alarmLevel = res.data.alarmLevel
        // } else {
        //   this.alarmLevel = this.alarmLevelDome
        // }
        // console.log(this.alarmLevel, 'this.alarmLevel')
      }).catch((err) => {
        console.log(err)
          mac: this.macName,
        },
      })
        .then((res) => {
          console.log(res, 'res')
          // console.log('以下是queryAlarmByMac请求的返回')
          this.alarmLevel = res.data.alarmLevel
          // var levelList = res.data.alarmLevel
          // var info = false
          // for (let key in levelList) {
          //   if (levelList[key] !== null) {
          //     info = true
          //     break
          //   }
          // }
          // if (info) {
          //   this.alarmLevel = res.data.alarmLevel
          // } else {
          //   this.alarmLevel = this.alarmLevelDome
          // }
          // console.log(this.alarmLevel, 'this.alarmLevel')
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 折线图
    drawChart() {
@@ -899,22 +1237,31 @@
            left: 'center',
            text: this.chartSensorName + '动态走势',
            Color: 'white',
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff'
            }
            textStyle: {
              // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff',
            },
          },
          grid: {
            top: 25,
            bottom: 25
            top: 50,
            bottom: 25,
          },
          tooltip: {
            // formatter:function(res){
            //   console.log(res,'res');
            //   var result=''
            //   var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>'
            //   result+=res[0].axisValue+"<br/>"+html1+res[0].value
            //   return result
            // },
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
                backgroundColor: '#6a7985',
                color: '#fff',
              },
            },
          },
          xAxis: {
            type: 'category',
@@ -922,80 +1269,81 @@
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
                color: '#fff',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }

                color: '#fff',
              },
            },
          },
          series: [{
            data: this.PM2_5Data,
            type: 'line',
            areaStyle: {},
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
          series: [
            {
              data: this.PM2_5Data,
              type: 'line',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#fff',
                },
              },
            },
          ],
        }
        that.myChart.setOption(option)
        setTimeout(function() {
          window.onresize = function() {
        setTimeout(function () {
          window.onresize = function () {
            that.myChart.resize()
          }
        }, 200)
      } else {
        console.log('容器为空')
      }
    }
    },
    // circles() {
    //   for (let index = this.circle; index < 100; index++) {
    //     index++
    //     this.circle++
    //   }
    // }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
h3{
h3 {
  font-size: 16px;
}
.noneScoll::-webkit-scrollbar{
.noneScoll::-webkit-scrollbar {
  display: none;
}
.cirqueBox{
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
    mask: radial-gradient(transparent 60px, #000 0);
.cirqueBox {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
  mask: radial-gradient(transparent 60px, #000 0);
}
.cirqueRed{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    background-color:#e31514;
    z-index: 1;
.cirqueRed {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #e31514;
  z-index: 1;
}
ul>li{
  list-style-type:none;
ul > li {
  list-style-type: none;
  margin-top: 15px;
  cursor: pointer;
}
.liActive{
.liActive {
  /* color: #555; */
  /* background: #fff; */
  color: #fff;
@@ -1003,114 +1351,119 @@
  padding: 5px;
}
::-webkit-scrollbar {
 width: 7px;
 height: 10px;
  width: 7px;
  height: 10px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
 background-color: #aaa;
 border-radius: 3px;
  background-color: #aaa;
  border-radius: 3px;
}
.main-container>section{
  display: flex!important;
.main-container > section {
  display: flex !important;
}
.main-container{
.main-container {
  background: url('../../assets/images/sixBg.jpg');
}
article, aside, footer, header, nav, section{
  display: flex!important;
article,
aside,
footer,
header,
nav,
section {
  display: flex !important;
}
.app-main{
.app-main {
  display: flex;
  padding-bottom: 0;
}
.left0{
.left0 {
  background: url('../../assets/images/左框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.left1{
.left1 {
  background: url('../../assets/images/左框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.left2{
.left2 {
  background: url('../../assets/images/左框2.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle0{
.middle0 {
  background: url('../../assets/images/中框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle1{
.middle1 {
  background: url('../../assets/images/中框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle2{
.middle2 {
  background: url('../../assets/images/中框2.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.right0{
.right0 {
  background: url('../../assets/images/右框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.right1{
.right1 {
  background: url('../../assets/images/右框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.title0{
.title0 {
  background: url('../../assets/images/标题.png') no-repeat;
  background-size: 70% 90%;
  background-position: center;
}
.alarmBg5{
.alarmBg5 {
  background: url('../../assets/images/level0_circle5.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg4{
.alarmBg4 {
  background: url('../../assets/images/level0_circle4.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg3{
.alarmBg3 {
  background: url('../../assets/images/level0_circle3.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg2{
.alarmBg2 {
  background: url('../../assets/images/level0_circle2.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg1{
.alarmBg1 {
  background: url('../../assets/images/level0_circle1.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg0{
.alarmBg0 {
  background: url('../../assets/images/level0_circle0.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.border-left{
.border-left {
  /* border-left:1px solid #eee */
  border: none;
}
.border-right{
.border-right {
  /* border-right:1px solid #eee */
  border: none;
}
.border-top{
.border-top {
  /* border-top: 1px solid #fff; */
  border: none;
}
.border-bottom{
.border-bottom {
  /* border-bottom: 1px solid #eee; */
  border: none;
}
.class1{
.class1 {
  height: 60%;
}
.class2{
.class2 {
  height: 100%;
}
/deep/ .el-progress-bar__outer{
/deep/ .el-progress-bar__outer {
  height: 1rem !important;
}
/deep/ .el-progress-bar__innerText{
/deep/ .el-progress-bar__innerText {
  font-size: 0.8rem;
}
</style>