mky-vent-base/src/views/vent/home/configurable/green/components/center-area-green.vue

<template>
    <div class="center-area-green">
        <div class="container">
            <div class="risk-score">
                <div class="item-label">风险得分</div>
                <div class="item-val">{{ paramDatas.riskLevel !== undefined && paramDatas.riskLevel !== null ?
                    paramDatas.riskLevel
                    : '-' }}</div>
            </div>
            <div class="dust-warn">
                <div class="dust-icon"></div>
                <div class="item-content" @click="showModal('dust')">
                    <div class="ite-label">粉尘监测预警</div>
                    <div class="ite-val">{{ paramDatas.fc == 0
                        ? '低风险'
                        : paramDatas.fc == 101
                            ? '低风险'
                            : paramDatas.fc == 102
                                ? '一般风险'
                                : paramDatas.fc == 103
                                    ? '较大风险'
                                    : paramDatas.fc == 104
                                        ? '重大风险'
                                        : paramDatas.fc == 201
                                            ? '报警'
                                            : paramDatas.fc }}</div>
                </div>
            </div>
            <div class="vent-warn">
                <div class="vent-icon"></div>
                <div class="item-content"  @click="showModal('vent')">
                    <div class="ite-label">通风监测预警</div>
                    <div class="ite-val">{{ paramDatas.tf == 0
                        ? '低风险'
                        : paramDatas.tf == 101
                            ? '低风险'
                            : paramDatas.tf == 102
                                ? '一般风险'
                                : paramDatas.tf == 103
                                    ? '较大风险'
                                    : paramDatas.tf == 104
                                        ? '重大风险'
                                        : paramDatas.tf == 201
                                            ? '报警'
                                            : paramDatas.tf }}</div>
                </div>
            </div>
            <div class="gas-warn">
                <div class="gas-icon"></div>
                <div class="item-content1">
                    <div class="ite-content" @click="showModal('gas')">
                        <div class="ite-label">瓦斯监测预警</div>
                        <div class="ite-val">{{ paramDatas.ws == 0
                            ? '低风险'
                            : paramDatas.ws == 101
                                ? '低风险'
                                : paramDatas.ws == 102
                                    ? '一般风险'
                                    : paramDatas.ws == 103
                                        ? '较大风险'
                                        : paramDatas.ws == 104
                                            ? '重大风险'
                                            : paramDatas.ws == 201
                                                ? '报警'
                                                : paramDatas.ws }}</div>
                    </div>
                    <div class="ite-content">
                        <div class="ite-label">矿井瓦斯等级鉴定</div>
                        <div class="ite-val">{{ sysOrgCode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯' }}</div>
                    </div>
                </div>
            </div>
            <div class="device-warn">
                <div class="device-icon"></div>
                <div class="item-content" @click="showModal('sbyj')">
                    <div class="ite-label">设备监测预警</div>
                    <div class="ite-val">{{ paramDatas.sb == 0
                        ? '低风险'
                        : paramDatas.sb == 101
                            ? '低风险'
                            : paramDatas.sb == 102
                                ? '一般风险'
                                : paramDatas.sb == 103
                                    ? '较大风险'
                                    : paramDatas.sb == 104
                                        ? '重大风险'
                                        : paramDatas.sb == 201
                                            ? '报警'
                                            : paramDatas.sb }}</div>
                </div>
            </div>
            <div class="fire-warn">
                <div class="fire-icon"></div>
                <div class="item-content" @click="showModal('fire')" >
                    <div class="ite-label">火灾监测预警</div>
                    <div class="ite-val">{{ paramDatas.fire == 0
                        ? '低风险'
                        : paramDatas.fire == 101
                            ? '低风险'
                            : paramDatas.fire == 102
                                ? '一般风险'
                                : paramDatas.fire == 103
                                    ? '较大风险'
                                    : paramDatas.fire == 104
                                        ? '重大风险'
                                        : paramDatas.fire == 201
                                            ? '报警'
                                            : paramDatas.fire }}</div>
                </div>
            </div>
            <div class="db-warn">
                <div class="db-icon"></div>
                <div class="item-content" @click="showModal('Minepressure')">
                    <div class="ite-label">顶板</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
            <div class="sz-warn">
                <div class="sz-icon"></div>
                <div class="item-content" @click="showModal('waterLevel')">
                    <div class="ite-label">水灾</div>
                    <div class="ite-val">低风险</div>
                </div>
            </div>
            <div class="risk-echartbox">
                <RiskWarnLevel :echartData="paramDatas.riskData"></RiskWarnLevel>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'
 import { useRouter } from 'vue-router';
import { useGlobSetting } from '/@/hooks/setting';
import RiskWarnLevel from './dz-risk.vue'
let props = defineProps({
    paramData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

let router = useRouter();
let paramDatas = reactive<any>({})
const { sysOrgCode, sysDataType } = useGlobSetting();

//跳转详情
  function showModal(data) {
    switch (data) {
      case 'vent':
        router.push('/ventilate/warn/home');
        break;
      case 'fire':
        router.push('/fire/warn/home');
        break;
      case 'dust':
        router.push('/dust/warn/home');
        break;
      case 'waterLevel':
        console.log('waterLevel');
        router.push('/warn/waterLevel/home');
        break;
      case 'gas':
        router.push('/gas/warn/home');
        break;
      case 'sbyj':
        router.push('/device/warn/home');
        break;
      case 'Minepressure':
        router.push('/monitorChannel/monitor-Minepressure');
        break;
    }
  }

watch(() => props.paramData, (newV, oldV) => {
    paramDatas = newV
}, { immediate: true, deep: true })
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
    .center-area-green {
        --image-model_container_img: url('@/assets/images/themify/deepblue/home-container/configurable/1-1.png');
        --image-model_risk_score: url('@/assets/images/themify/deepblue/home-container/configurable/1-2.png');
        --image-model_dust_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-7.png');
        --image-model_vent_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-5.png');
        --image-model_gas_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-3.png');
        --image-model_device_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-6.png');
        --image-model_fire_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-4.png');
        --image-model_db_warn: url('@/assets/images/themify/deepblue/home-container/configurable/db-green.png');
        --image-model_sz_warn: url('@/assets/images/themify/deepblue/home-container/configurable/sz-green.png');
        --image-model_item_content: url('@/assets/images/themify/deepblue/home-container/configurable/1-8.png');
        --image-model_item_content1: url('@/assets/images/themify/deepblue/home-container/configurable/1-9.png');
    }
}

.center-area-green {
    --image-model_container_img: url('@/assets/images/home-green/1-1.png');
    --image-model_risk_score: url('@/assets/images/home-green/1-2.png');
    --image-model_dust_warn: url('@/assets/images/home-green/1-7.png');
    --image-model_vent_warn: url('@/assets/images/home-green/1-5.png');
    --image-model_gas_warn: url('@/assets/images/home-green/1-3.png');
    --image-model_device_warn: url('@/assets/images/home-green/1-6.png');
    --image-model_fire_warn: url('@/assets/images/home-green/1-4.png');
    --image-model_db_warn: url('@/assets/images/home-green/db-green.png');
    --image-model_sz_warn: url('@/assets/images/home-green/sz-green.png');
    --image-model_item_content: url('@/assets/images/home-green/1-8.png');
    --image-model_item_content1: url('@/assets/images/home-green/1-9.png');
    height: 100%;

    .container {
        position: relative;
        width: 100%;
        height: calc(100% - 30px);
        margin-top: 60px;
        background: var(--image-model_container_img) no-repeat center;
        background-size: 100% 100%;
    }

    .risk-echartbox {
        position: absolute;
        left: 0px;
        top: -72px;
        width: 220px;
        height: 170px;
    }

    .risk-score {
        position: absolute;
        left: 50%;
        top: -65px;
        transform: translate(-44%, 0);
        width: 206px;
        height: 60px;
        font-size: 18px;
        color: #fff;
        background: var(--image-model_risk_score) no-repeat;
        background-size: 100% 100%;

        .item-label {
            text-align: center;
            margin-bottom: 5px;

        }

        .item-val {
            text-align: center;
            font-family: 'douyuFont';
        }
    }

    .dust-warn {
        position: absolute;
        left: 242px;
        top: 52px;
        width: 132px;
        height: 108px;
        background: var(--image-model_dust_warn) no-repeat;
        background-size: 100% 100%;
    }

    .vent-warn {
        position: absolute;
        left: 200px;
        top: 334px;
        width: 132px;
        height: 108px;
        background: var(--image-model_vent_warn) no-repeat;
        background-size: 100% 100%;
    }

    .gas-warn {
        position: absolute;
      left: 420px;
    top: 436px;
        width: 132px;
        height: 108px;
        background: var(--image-model_gas_warn) no-repeat;
        background-size: 100% 100%;
    }

    .device-warn {
        position: absolute;
        right: 196px;
        top: 340px;
        width: 132px;
        height: 108px;
        background: var(--image-model_device_warn) no-repeat;
        background-size: 100% 100%;
    }

    .fire-warn {
        position: absolute;
           right: 178px;
        top: 58px;
        width: 132px;
        height: 108px;
        background: var(--image-model_fire_warn) no-repeat;
        background-size: 100% 100%;
    }

    .db-warn {
        position: absolute;
        left: 42px;
        top: 182px;
        width: 132px;
        height: 108px;
        background: var(--image-model_db_warn) no-repeat;
        background-size: 100% 100%;
    }

    .sz-warn {
        position: absolute;
        right:34px;
        top: 136px;
        width: 132px;
        height: 108px;
        background: var(--image-model_sz_warn) no-repeat;
        background-size: 100% 100%;
    }

    .item-content {
        position: absolute;
        left: -4px;
        top: -54px;
        width: 127px;
        height: 56px;
        background: var(--image-model_item_content) no-repeat;
        background-size: 100% 100%;
    }

    .item-content1 {
        display: flex;
        position: absolute;
        left: -60px;
        top: -54px;
        width: 258px;
        height: 56px;
        background: var(--image-model_item_content1) no-repeat;
        background-size: 100% 100%;
    }

    .ite-label {
        text-align: center;
        margin-bottom: 10px;
        padding-top: 4px;
        font-size: 12px;
    }

    .ite-val {
        width: 100%;
        text-align: center;
        font-family: 'douyuFont';
        font-size: 12px;
    }

    .ite-content {
        width: 50%;
        height: 100%;
    }
}
</style>