yos_web/src/optionSystem/FProductManage/modules/aside.vue

<template>
  <div class="select-info">
    <div class="info-title">配置概要</div>
    <div class="scroll">
        <div class="product-wrapper">
            <div class="product">
                <div class="product-header">
                    <div class="title">光头</div>
                    <span @click="refresh('光头')" v-if="!!resultArr[0]">
                        <img src="@/assets/重选.svg" alt="">
                        重选
                    </span>
                </div>
                <div class="product-name">{{ resultArr[0] ? resultArr[0].itemname : '暂无' }}</div>
                <div class="attrite" v-if="!type && resultArr[0] && resultArr[0].torque">
                    <div class="attrite-title">扭矩：</div>
                    <div class="attrite-value">{{ resultArr[0].torque }}</div>
                </div>
                <div class="attrite" v-if="resultArr[0] && resultArr[0].flh">
                    <div class="attrite-title">法兰号：</div>
                    <div class="attrite-value">{{ resultArr[0].flh }}</div>
                </div>
                <div class="attrite" v-if="resultArr[0] && resultArr[0].caliber">
                    <div class="attrite-title">公称通径：</div>
                    <div class="attrite-value">{{ resultArr[0].caliber }}</div>
                </div>
                <div class="attrite" v-if="resultArr[0] && resultArr[0].nominalpressure">
                    <div class="attrite-title">公称压力：</div>
                    <div class="attrite-value">{{ resultArr[0].nominalpressure.join(',') }}</div>
                </div>
                <div class="attrite" v-if="resultArr[0] && resultArr[0].stemmaterial">
                    <div class="attrite-title">阀杆材质：</div>
                    <div class="attrite-value">{{ resultArr[0].stemmaterial }}</div>
                </div>
                <div class="attrite" v-if="resultArr[0] && resultArr[0].bodymaterial">
                    <div class="attrite-title">阀体材质：</div>
                    <div class="attrite-value">{{ resultArr[0].bodymaterial }}</div>
                </div>
            </div>

            <div class="product">
                <div class="product-header">
                    <div class="title">执行器</div>
                    <span  @click="refresh('执行器')" v-if="!!resultArr[1]">
                        <img src="@/assets/重选.svg" alt="">
                        重选
                    </span>
                </div>
                <div class="product-name">{{ resultArr[1] ? resultArr[1].actuatorname : '暂无' }}</div>
                <div class="attrite" v-if="resultArr.length <= 2">
                    {{ resultArr[1] ? resultArr[1].gearboxname ? `${resultArr[1].actuatormodel}+${resultArr[1].gearboxname}` :resultArr[1].actuatormodel:'暂无' }}
                </div>
                <div class="attrite" v-else>
                    {{ resultArr[1] ? `${resultArr[1].actuatormodel}`:'暂无' }}
                </div>
                <div class="attrite" v-if="!type && resultArr[1] && resultArr[1].torque">
                    <div class="attrite-title">输出扭矩：</div>
                    <div class="attrite-value">{{resultArr[1].torque }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].maxruntime">
                    <div class="attrite-title">开关时间：</div>
                    <div class="attrite-value">{{resultArr[1].maxruntime }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].speed">
                    <div class="attrite-title">转速：</div>
                    <div class="attrite-value">{{resultArr[1].speed }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].ratio">
                    <div class="attrite-title">减速比：</div>
                    <div class="attrite-value">{{resultArr[1].ratio }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].supplyvoltage">
                    <div class="attrite-title">电压：</div>
                    <div class="attrite-value">{{resultArr[1].supplyvoltage }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].ratedcurrent">
                    <div class="attrite-title">电流：</div>
                    <div class="attrite-value">{{resultArr[1].ratedcurrent }}</div>
                </div>
                <div class="attrite" v-if="resultArr[1] && resultArr[1].ratedpower">
                    <div class="attrite-title">功率：</div>
                    <div class="attrite-value">{{resultArr[1].ratedpower }}</div>
                </div>
            </div>

            <div class="product">
                <div class="product-header">
                    <div class="title">辅件</div>
                    <span @click="refresh('辅件')" v-if="resultArr.length > 3">
                        <img src="@/assets/重选.svg" alt="">
                        重选
                    </span>
                </div>
                <div class="attrite2" v-for="item in fujianArr" :key="item.othertype">
                    <div class="attrite-title">{{ item.othertype }}：</div>
                    <div class="attrite-value">{{ item.model }}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    props:['resultArr','fujianArr','type'],
    methods: {
        refresh (type) {
            this.$emit('refresh',type)
        }
    }
}
</script>

<style scoped>
.select-info {
    background: #F5F6FA;
    font-family: Microsoft YaHei, Microsoft YaHei;
    width: 240px;
    border-right: 1px #999999 solid;
    z-index: 99999991 !important;
    flex-shrink: 0;
    word-wrap: break-word;
}
.select-info .info-title {
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    padding: 10px 20px;
    border-bottom: 1px solid #D9D9D9;
}
.select-info .product-wrapper {
    padding: 0 20px;
}

.select-info .product-wrapper .product {
    padding-bottom:20px;
    border-bottom: #D9D9D9 1px solid;
}
.select-info .product-wrapper .product:last-child {
    border-bottom: none !important;
}
.select-info .product-wrapper .product .product-header {
    display: flex;
    align-items: center;
    align-content: center;
    padding: 10px 0;
}
.select-info .product-wrapper .product .product-header span:last-child {
    color: #3874F6;
    margin-left: 18px;
    cursor: pointer;
}
.select-info .product-wrapper .product .product-header .title {
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}
.select-info .product-wrapper .product .product-header img {
    width: 12px;
    height: 12px;
}
.select-info .product-wrapper .product .product-name {
    font-weight: 400;
    font-size: 14px;
    color: #555555;
}
.select-info .product-wrapper .product .attrite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    padding-top: 10px;
}
.select-info .product-wrapper .product .attrite .attrite-title {
    color: #555555;
}
.select-info .product-wrapper .product .attrite .attrite-value {
}

.select-info .product-wrapper .product .attrite2 {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    padding-top: 10px;
}
.select-info .product-wrapper .product .attrite2 .attrite-title {
    color: #555555;
    margin-bottom: 5px;
}
.select-info .product-wrapper .product .attrite2 .attrite-value {
}

.select-info .product-wrapper .product {
    display: flex;
    flex-direction: column;
}
</style>