yxk-storeroom-system/src/views/home.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <!-- <github-corner class="github-corner" /> -->
      <panel-group />
      <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row> -->
      <el-row :gutter="20" style="margin-bottom:20px;height: 152px;">
        <el-col :xs="24" :sm="24" :lg="8">
          <!--  search-area -->
          <div class="container-left" style="height: 100%;margin: 0; position: relative;">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class=" table-title" style="margin-bottom: 26px;">
              <p class="title-arrow">
                档案检索
              </p>
            </h3>
            <SearchAcrives :is-home-search="isHomeSearch" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="container-left" style="height: 100%;margin: 0; position: relative;">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class=" table-title">
              <p class="title-arrow">
                <i class="iconfont icon-kongqizhiliangshuju" />环境数据
              </p>
            </h3>
            <div class="home-floor-tab">
              <p :class="{ 'active-floor': floorEnvIndex == 0 }" @click="changeFloorEnvTab(0)">5楼</p>
              <p :class="{ 'active-floor': floorEnvIndex == 1 }" @click="changeFloorEnvTab(1)">7楼</p>
            </div>
            <el-carousel ref="carouselEnvRef" trigger="click" :interval="10000" indicator-position="none" height="110px" arrow="never" @change="handleEnvChange">
              <el-carousel-item>
                <div class="warehouse-tab" style="height: calc(100%);  padding-left: 15px;">
                  <div class="five-bottom">
                    <p class="env-title">档案库</p>
                    <ul class="leakage-list">
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_001.curstatus > 0 }">
                        <p>温度</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_002.curstatus > 0 }">
                        <p>湿度</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_003.curstatus > 0 }">
                        <p>CO2</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_005.curstatus > 0 }">
                        <p>PM2.5</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_006.curstatus > 0 }">
                        <p>PM10</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_004.curstatus > 0 }">
                        <p>VOC</p>
                        <span>{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="display: flex; justify-content:space-between; align-items: center;">
                    <div class="five-bottom">
                      <p class="env-title">整理室</p>
                      <ul class="leakage-list">
                        <li :class="{ 'leakage-warn': oaoMessage.ZLS_MO_OAO_001.alarmState }">
                          <p>温度</p>
                          <span>{{ oaoMessage.ZLS_MO_OAO_001.wendu }}</span>
                        </li>
                        <li :class="{ 'leakage-warn': oaoMessage.ZLS_MO_OAO_001.alarmState }">
                          <p>湿度</p>
                          <span>{{ oaoMessage.ZLS_MO_OAO_001.sidu }}</span>
                        </li>
                      </ul>
                    </div>
                    <div class="five-bottom" style="padding-right: 13px;">
                      <p class="env-title">阅览室</p>
                      <ul class="leakage-list">
                        <li :class="{ 'leakage-warn': oaoMessage.YLS_MO_OAO_001.alarmState }">
                          <p>温度</p>
                          <span>{{ oaoMessage.YLS_MO_OAO_001.wendu }}</span>
                        </li>
                        <li :class="{ 'leakage-warn': oaoMessage.YLS_MO_OAO_001.alarmState}">
                          <p>湿度</p>
                          <span>{{ oaoMessage.YLS_MO_OAO_001.sidu }}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="warehouse-tab" style="height: calc(100%);  padding-left: 15px;">
                  <div style="display: flex; justify-content: flex-start; align-items: center;">
                    <p class="env-title">现行<br>文件室</p>
                    <ul class="leakage-list">
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_001.curstatus > 0 }">
                        <p>温度</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_001.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_002.curstatus > 0 }">
                        <p>湿度</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_002.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_003.curstatus > 0 }">
                        <p>CO2</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_003.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_005.curstatus > 0 }">
                        <p>PM2.5</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_005.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_006.curstatus > 0 }">
                        <p>PM10</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_006.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_004.curstatus > 0 }">
                        <p>VOC</p>
                        <span>{{ topDisplayData.XXW_DIV_TOP_004.curValue }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="display: flex; justify-content: flex-start; align-items: center;">
                    <p class="env-title">待销<br>文件室</p>
                    <ul class="leakage-list">
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_001.curstatus > 0 }">
                        <p>温度</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_001.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_002.curstatus > 0 }">
                        <p>湿度</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_002.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_003.curstatus > 0 }">
                        <p>CO2</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_003.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_005.curstatus > 0 }">
                        <p>PM2.5</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_005.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_006.curstatus > 0 }">
                        <p>PM10</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_006.curValue }}</span>
                      </li>
                      <li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_004.curstatus > 0 }">
                        <p>VOC</p>
                        <span>{{ topDisplayData.DXW_DIV_TOP_004.curValue }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="container-left" style="height: 100%;margin: 0; position: relative;">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class=" table-title">
              <p class="title-arrow">
                <svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房
              </p>
            </h3>
            <div class="home-floor-tab">
              <p :class="{ 'active-floor': floorIndex == 0 }" @click="changeFloorTab(0)">5楼</p>
              <p :class="{ 'active-floor': floorIndex == 1 }" @click="changeFloorTab(1)">7楼</p>
            </div>
            <el-carousel ref="carouselRef" trigger="click" :interval="4000" indicator-position="none" height="110px" arrow="never" @change="handleChange">
              <el-carousel-item>
                <div class="warehouse-tab">
                  <ul class="warehouse-nav">
                    <li @click="changeActiveTab(1,0)">
                      <span />
                      <p>全景图</p>
                    </li>
                    <li @click="changeActiveTab(1,1)">
                      <span />
                      <p>档案库</p>
                    </li>
                    <li @click="changeActiveTab(1,2)">
                      <span />
                      <p>整理室</p>
                    </li>
                    <li @click="changeActiveTab(1,3)">
                      <span />
                      <p>阅览室</p>
                    </li>
                  </ul>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="warehouse-tab">
                  <ul class="warehouse-nav">
                    <li @click="changeActiveTab(0,4)">
                      <span />
                      <p>全景图</p>
                    </li>
                    <li @click="changeActiveTab(0,5)">
                      <span />
                      <p>现行文件室</p>
                    </li>
                    <li @click="changeActiveTab(0,6)">
                      <span />
                      <p>待销文件室</p>
                    </li>
                  </ul>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 251px);">
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 待办事项 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">
                <svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项
              </p>
            </h3>
            <div style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;">
              <ul v-if="waitBorrowerData.length !== 0" class="todo-list">
                <li v-for="(item,index) in waitBorrowerData" :key="index" :class="item.title.includes('警告') || item.title.includes('逾期') ? 'warn-info' :''" @click="handleToWaiting(item)">
                  <el-tooltip class="item" effect="dark" :content="item.title" :enterable="false" placement="top">
                    <p>{{ item.title }}</p>
                  </el-tooltip>
                  <span>{{ item.update_time | parseTime }}</span>
                </li>
              </ul>
              <div v-else class="empty-main" style="height: 100%;">
                <svg-icon icon-class="empty" class-name="empty-img" />
                <p>暂无数据</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 门禁记录 -->
          <security-door :height="'calc(100% - 40px)'" />
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 报警记录 -->
          <warehouse-warning :height="'calc(100% - 40px)'" />
        </el-col>
      </el-row>
      <el-row :gutter="20" style="height: calc(50vh - 251px);">
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 档案借阅 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">档案借阅</p>
            </h3>
            <div class="chart-wrapper">
              <lend-across :lend-data="lendData" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 档案类别 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">档案类别</p>
            </h3>
            <div class="chart-wrapper">
              <cate-pie :cate-data="cateData" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 档案类型 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">档案类型</p>
            </h3>
            <div v-if="typeData.length !== 0" class="chart-wrapper">
              <type-pie :type-data="typeData" />
            </div>
            <div v-else class="empty-main">
              <svg-icon icon-class="empty" class-name="empty-img" />
              <p>暂无数据</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import lendAcross from '@/views/components/echarts/lendAcross.vue'
import catePie from '@/views/components/echarts/catePie.vue'
import typePie from '@/views/components/echarts/typePie.vue'
import WarehouseWarning from '@/views/components/WarehouseWarning'
import SecurityDoor from '@/views/components/SecurityDoor'
import SearchAcrives from '@/views/archivesManage/archivesSearch/index'
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
import { FetchWaitBorrower } from '@/api/archivesManage/lendManage'
import displayConfigApi from '@/api/storeManage/displayConfig'
import thirdApi from '@/api/thirdApi'

import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    WarehouseWarning,
    SecurityDoor,
    PanelGroup,
    lendAcross,
    catePie,
    typePie,
    SearchAcrives
  },
  mixins: [statisticsCrud],
  data() {
    return {
      waitBorrowerData: [],
      floorIndex: 0,
      floorEnvIndex: 0,
      isHomeSearch: false,
      roomId: null,
      allDisplayConfigData: [],
      displayConfigData: [],
      url: '',
      allDeviceIds: [],
      oaoMessage: {
        ZLS_MO_OAO_001: {
          show: false,
          wendu: '',
          sidu: '',
          alarmState: 0
        },
        YLS_MO_OAO_001: {
          show: false,
          wendu: '',
          sidu: '',
          alarmState: 0
        }
      },
      topDisplayData: {
        DAK_DIV_TOP_001: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_002: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_003: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_004: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_005: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DAK_DIV_TOP_006: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        // 7F  待销文件室
        DXW_DIV_TOP_001: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DXW_DIV_TOP_002: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DXW_DIV_TOP_003: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DXW_DIV_TOP_004: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DXW_DIV_TOP_005: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        DXW_DIV_TOP_006: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        // 7F 现行文件室 / 信息技术室
        XXW_DIV_TOP_001: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_002: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_003: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_004: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_005: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_006: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  async created() {
    this.getWaitBorrower()
    this.roomId = null
    const params = {
      storeroomId: null,
      isQueryAll: 1
    }
    this.allDisplayConfigData = await displayConfigApi.list(params)
    this.allDisplayConfigData.forEach(element => {
      if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP') || element.divPosition.includes('LS'))) {
        this.allDeviceIds.push(element.deviceInfo.deviceId)
        if (!this.url) {
          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
        }
      }
    })
    this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) })
    await this.getRealTimeData()
  },
  mounted() {
  },
  methods: {
    handleChange(index) {
      this.floorIndex = index
    },
    handleEnvChange(index) {
      this.floorEnvIndex = index
    },
    changeFloorTab(index) {
      this.floorIndex = index
      const carousel = this.$refs.carouselRef
      carousel.setActiveItem(index)
    },
    changeFloorEnvTab(index) {
      this.floorEnvIndex = index
      const carousel = this.$refs.carouselEnvRef
      carousel.setActiveItem(index)
    },
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // },
    getWaitBorrower() {
      FetchWaitBorrower().then(data => {
        if (data) {
          this.waitBorrowerData = data
        }
      })
    },
    changeActiveTab(floorId, roomId) {
      if (this.roles.includes('admin') || this.roles.includes('warehouse3D')) {
        this.$router.push({
          name: 'warehouse3D',
          params: {
            floorId: floorId,
            roomId: roomId
          }
        })
      } else {
        this.$message({
          message: '当前账号没有权限',
          type: 'warning'
        })
      }
    },
    handleToWaiting(item) {
      if (this.roles.includes('admin') || this.roles.includes('lendManage:list')) {
        // 待借档案：到“待借档案” 0
        // 借出确认：到“借出确认” 1
        // 逾期警告：到“归还确认” 2
        // 即将到期：到“归还确认” 3
        let locationIndex = 0
        if (item.title.includes('待借档案')) {
          locationIndex = 0
        } else if (item.title.includes('借出确认')) {
          locationIndex = 1
        } else if (item.title.includes('逾期警告')) {
          locationIndex = 2
        } else if (item.title.includes('即将到期')) {
          locationIndex = 2
        }
        this.$router.push({
          name: 'lendManage',
          params: {
            locationIndex: locationIndex
          }
        })
      } else {
        this.$message({
          message: '当前账号没有权限',
          type: 'warning'
        })
      }
    },
    getRealTimeData() {
      if (this.allDeviceIds.length > 0) {
        console.log('this.allDeviceIds', this.allDeviceIds)
        console.log('this.displayConfigData', this.displayConfigData)
        thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
          // this.oaoMessage.splice(0, this.oaoMessage.length)
          this.displayConfigData.forEach(element => {
            if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
              // 获取页面div显示的数据
              const result = data.find((item) => {
                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
              })
              if (result) {
                this.$set(this.topDisplayData, element.divPosition, {
                  show: true,
                  curValue: result.curvalue,
                  unit: result.unit,
                  curstatus: result.curstatus
                })
              } else {
                this.$set(this.topDisplayData, element.divPosition, {
                  show: false
                })
              }
            } else if (element.divPosition.includes('OAO')) {
              const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
              const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
              let wendu = {}
              let sidu = {}
              if (wenduParamId) {
                wendu = data.find((item) => {
                  return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              if (siduParamId) {
                sidu = data.find((item) => {
                  return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              this.$set(this.oaoMessage, element.divPosition, {
                show: true,
                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
                alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0)
              })
            }
          })
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
.dashboard-editor-container {
  padding: 20px;
  background-color: #031435;
  position: relative;

  .chart-wrapper {
    height: calc(100% - 40px);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.warehouse-tab {
  color: #fff;
  .warehouse-nav {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 15px;
    z-index: 11;
    width: 100%;
    padding: 0;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      height: 90px;
      text-align: right;
      font-size: 14px;
      position: relative;
      &:hover {
        cursor: pointer;
      }
      span {
        width: 72px;
        height: 52px;
        margin-bottom: 7px;
      }
      p {
        text-align: left;
      }
      &:first-child span {
        background: url("~@/assets/images/tab_fullview_logo.png") no-repeat;
      }
      &:nth-child(2) span {
        background: url("~@/assets/images/tab_archives_logo.png") no-repeat;
      }
      &:nth-child(3) span {
        background: url("~@/assets/images/tab_collate_logo.png") no-repeat;
      }
      &:nth-child(4) span {
        background: url("~@/assets/images/tab_read_logo.png") no-repeat;
      }
    }
  }
}
.el-col {
  height: 100%;
}
.container-left,
.container-right,
.container-wrap,
.el-card,
.header-container-wrap {
  min-height: 100%;
}
.warehose-el-table ::v-deep .el-table__header-wrapper {
  box-shadow: inset 0px 0px 6px 1px #339cff;
  background: none !important;
}
.container-wrap {
  min-height: auto;
  height: 100%;
  // overflow: hidden;
}
.todo-list {
  padding: 0 20px;
  & li {
    height: 42px;
    line-height: 42px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #ffffff;
    background: #02255f;
    box-shadow: inset 0px 0px 6px 1px #339cff;
    border-radius: 26px;
    opacity: 1;
    cursor: pointer;
    &.warn-info{
      color: #F65163;
      box-shadow: inset 0px 0px 15px 1px #f65164;
    }
    & p {
      display: inline-block;
      width: calc(100% - 140px);
      padding-left: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
    }
    & span {
      float: right;
      padding-right: 10px;
    }

  }
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #02255f;
}
.search-area {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .search-main{
  padding: 0 0 0 20px;
  .head-container{
    padding: 0;
    width: 100% !important;
    .search-input {
      width: 100% !important;
    }
    .input-with-select{
      width: 100% !important;
    }
  }
}
.home-floor-tab{
  position: absolute;
  right: 14px;
  top: 10px;
  color: #fff;
   display: flex;
   justify-self: flex-start;
  p{
    font-size: 14px;
    padding:2px 6px;
    margin-right: 6px;
    color: #339cff;
    border: 1px solid #339cff;
    border-radius: 4px;
    cursor: pointer;
    &.active-floor,
    &:hover{
      color: #fff;
      background-color: #113d72;
    }
  }
}
.icon-kongqizhiliangshuju{
  font-size: 14px;
  color: #F65163;
  margin-right: 6px
}
.env-title{
  width: 50px;
  height: 40px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  margin: 10px 10px 0 0;
}
.leakage-list {
  display: flex;
  justify-content:flex-start;
  flex: 1;
  text-align: left;
  font-size: 10px;
  li {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    width: 60px;
    height: 40px;
    border: 1px solid #3581cc;
    background-color: #02255f;
    border-radius: 2px;
    padding: 4px;
    margin: 10px 10px 0 0;
    font-size: 12px;
    &::before {
      content: "";
      position: absolute;
      top: 2px;
      right: 2px;
      width: 0;
      height: 0;
      border-color: transparent #339cff;
      border-width: 0 4px 4px 0;
      border-style: solid;
    }
    p {
      width: 100%;
    }
    span{
      width: 100%;
      color: #18B08F;
      text-align: right;
    }
    &.leakage-warn {
      border-color: #f65164;
      box-shadow: inset 0px 0px 15px 1px #f65164;
      color: #f65164;
      &::before {
        border-color: transparent #f65164;
      }
      span {
        color: #f65164;
      }
    }
  }
}

.five-bottom{
  display: flex;
  justify-content:  flex-start;
  align-items: center;
  .env-title{
    line-height: 40px;
  }
}
</style>