mky-vent-base/src/views/vent/home/clique/components/scene-key.vue

<template>
  <div class="sceneKey">
    <div class="scene-title">{{ sceneTitle }}</div>
    <div class="scene-content">
      <div class="content-t">

        <a-select style="width: 372px;" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect" >
          <a-select-option v-for="item in selectList"  :value="item.value">{{
      item.label
    }}
          </a-select-option>
        </a-select>

      </div>
      <div class="content-c">
        <echartScene :echartData="echartData"></echartScene>
      </div>
      <div class="content-b">
        <div class="card-box" v-for="(item, index) in sceneList" :key="index">
          <i class="box-icon">
            <SvgIcon v-if="index == 0" class="icon" size="14" name="vent-c" />
            <SvgIcon v-if="index == 1" class="icon" size="14" name="fire-c" />
            <SvgIcon v-if="index == 2" class="icon" size="14" name="gas-c" />
            <SvgIcon v-if="index == 3" class="icon" size="14" name="dust-c" />
          </i>
          <span class="box-label">{{ item.label }}</span>
          <span class="box-value">{{ item.value }}</span>
          <i class="box-img">
            <img v-if="true" src="../../../../../assets/images/company/iconS1.png" alt="">
            <img v-else src="../../../../../assets/images/company/iconS2.png" alt="">
            <img v-else src="../../../../../assets/images/company/iconS3.png" alt="">
            <img v-else src="../../../../../assets/images/company/iconS4.png" alt="">
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, watch } from 'vue'
import { SvgIcon } from '/@/components/Icon';
import echartScene from '../components/echart-scene.vue'

let props = defineProps({
  compositeData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

let sceneTitle = ref('关键场景通防综合监测')

let sceneList = reactive([
  { label: '总进风', value: 0 },
  { label: '总风量', value: 0 },
  { label: '等级孔', value: 0 },
])

let selectVal = ref('')
let selectList = reactive<any[]>([])
let compositeDatas=ref<any[]>([])

//图表数据
let echartData = reactive({
  jfq: 0,
  yfq: 0,
  hfq: 0,
  zf: 0
})

//下拉选项切换
function changeSelect(val){
  console.log(val,'下拉选项')
  selectVal.value=val
  let datas=compositeDatas.value.filter(v=>v.deviceName==selectVal.value)[0]
      echartData.jfq = datas.majorpath.drag_1
      echartData.yfq = datas.majorpath.drag_2
      echartData.hfq = datas.majorpath.drag_3
      echartData.zf =datas.majorpath.drag_total

      sceneList[0].value = datas.majorpath.drag_total
      sceneList[1].value = datas.majorpath.m3_total
      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
}

watch(() => props.compositeData, (newS, oldS) => {
  console.log(newS, '综合监测数据------------')
  compositeDatas.value=newS
  if (newS.length != 0) {
    selectList.length = 0
    newS.forEach(el => {
      selectList.push({ label: el.deviceName, value: el.deviceName })
    })
    if (selectVal.value) {
      let datas=newS.filter(v=>v.deviceName==selectVal.value)[0]
      echartData.jfq = datas.majorpath.drag_1
      echartData.yfq = datas.majorpath.drag_2
      echartData.hfq = datas.majorpath.drag_3
      echartData.zf =datas.majorpath.drag_total

      sceneList[0].value = datas.majorpath.drag_total
      sceneList[1].value = datas.majorpath.m3_total
      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
    } else {
      selectVal.value = selectList[0].value
      console.log(selectVal.value, '0009999')
      echartData.jfq = newS[0].majorpath.drag_1
      echartData.yfq = newS[0].majorpath.drag_2
      echartData.hfq = newS[0].majorpath.drag_3
      echartData.zf = newS[0].majorpath.drag_total

      sceneList[0].value = newS[0].majorpath.drag_total
      sceneList[1].value = newS[0].majorpath.m3_total
      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
    }
  }






}, {
  immediate: true,
  deep: true
})


</script>

<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../assets/font/douyuFont.otf');
}

.sceneKey {
  position: relative;
  width: 100%;
  height: 100%;

  .scene-title {
    position: absolute;
    left: 50px;
    top: 12px;
    color: #fff;
    font-family: 'douyuFont';
    font-size: 14px;

  }

  .scene-content {

    height: 100%;
    padding: 62px 20px 28px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .content-t {
      position: relative;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
      background-size: 100% 100%;

      .zxm-select {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);

        &:nth-child(1) {
          left: 10px;
        }
      }
    }

    .content-c {
      width: 100%;
      height: calc((100% - 30px) / 2);
      background: url('../../../../../assets/images/company/area2.png') no-repeat center;
      background-size: 100% 100%;
    }

    .content-b {
      width: 100%;
      height: calc((100% - 30px) / 2);
      background: url('../../../../../assets/images/company/area1.png') no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .card-box {
        position: relative;
        width: 331px;
        height: 32px;
        background: url('../../../../../assets/images/company/fxfx.png') no-repeat center;
        background-size: 100% 100%;

        .box-icon {
          position: absolute;
          left: 13px;
          top: 50%;
          transform: translate(0, -50%);
        }

        .box-label {
          position: absolute;
          left: 56px;
          top: 50%;
          transform: translate(0, -50%);
          color: #fff;
          font-size: 14px;
        }

        .box-value {
          position: absolute;
          right: 96px;
          top: 50%;
          transform: translate(0, -48%);
          font-family: 'douyuFont';
          font-size: 14px;
          color: #31fbcc;
        }

        .box-img {
          position: absolute;
          right: 2px;
          top: 50%;
          transform: translate(0, -60%);
        }
      }
    }
  }
}

::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
  height: 24px;
}

::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
  height: 24px;
}

::v-deep .zxm-select-selection-placeholder {
  color: #fff !important;
  line-height: 22px !important;
}

::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
  line-height: 24px;
}

::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
  background-color: transparent;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 2px solid;
  border-right: 2px solid;
  border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;

}

::v-deep .zxm-select-arrow {
  color: #fff !important;
}

::v-deep .zxm-select-selection-item {
  color: #fff !important
}

::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
  line-height: 24px !important;
}
</style>