web
6 天以前 c45cbdd1fb5e1c491a58f24be403b97999c1a9ec
src/views/screen/components/dataItem.vue
@@ -6,38 +6,48 @@
                <div class="gas-CH">
                    <img src="@/assets/images/screen/CH4.png" alt="" />
                </div>
                <div class="gas-data"><span>1.1</span>%</div>
                <div class="gas-data"><span>{{props.item.hydrogenValue}}</span>%</div>
            </div>
            <div class="gas">
                <div class="gas-t">H₂S</div>
                <div class="gas-H2">
                    <img src="@/assets/images/screen/H2S.png" alt="" />
                </div>
                <div class="gas-data"><span>1.2</span>ppm</div>
                <div class="gas-data"><span>{{ props.item.methaneValue }}</span>ppm</div>
            </div>
        </div>
        <div class="item-address">
            安装位置:重庆市丰都县龙城大道435号安装位置:重庆市丰都县龙城大道435号
            安装位置:{{ props.item.pointName }}
        </div>
        <div class="status">
            <span>运行状态:</span>
            <span class="val">正常运行</span>
            <span class="stop" v-if="props.item.facilityState === 0">停止</span>
            <span class="run" v-else-if="props.item.facilityState === 1">运行中</span>
            <span class="warn1" v-else-if="props.item.facilityState === 2">一级报警</span>
            <span class="warn2" v-else-if="props.item.facilityState === 3">二级报警</span>
        </div>
    </div>
</template>
<script setup>
    const props = defineProps({
        item: {
            type: Object,
            default: {}
        }
    })
</script>
<style lang="scss" scoped>
.item{
    width: 144px;
    width: 134px;
    height: 164px;
    border-radius: 10px;
    background: radial-gradient( rgba(50,154,196,0.5) 0%, rgba(21,74,131,0.5) 100%);
    box-shadow: inset 0px 0px 10px 0px rgba(50,154,196,0.8);
    padding: 8px;
    padding: 8px 4px;
    box-sizing: border-box;
    .item-air{
        display: flex;
@@ -94,9 +104,17 @@
    .status{
        font-size: 0.8rem;
        margin-top: 0.6rem;
        .val{
        .run{
            color: rgb(40, 250, 40);
            font-size: 0.8rem;
        }
        .stop{
            color: #ccc;
        }
        .warn1{
            color: #f1e313;
        }
        .warn2{
            color: #f14713;
        }
    }
}