bonus-ui/src/views/screen/cityScreen-old/components/engineerUsing/index.vue

<template>
    <div class="content">
        <div class="content-title">
            <div class="title">
                工程在用装备情况
            </div> 
            <div class="select-view"> 
                <select v-model="selectId" @change="changeSelect" class="select-box">
                    <option v-for="item in options" :key="item.value" :value="item.value">
                        {{ item.label }}
                    </option>
                </select>
                <!-- <el-select v-model="value" placeholder="请选择" popper-class="popperView">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> -->
            </div>
        </div>
        <div class="content-view">
            <div class="topView">
                <div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div :class="tabIndex==1?'topTab1 fs-24 active1':'topTab1 fs-24'" @click="changTab(1)">线路</div>
                    <div :class="tabIndex==3?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(3)">变电</div>
                    <div :class="tabIndex==2?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(2)">电缆</div> 
                </div>
                <div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
                        <img src="../../../../../assets/cityScreen/icon3.png" class="icon" />
                        <span class="text" style="">项目数:</span>
                        <span class="num">{{total}}</span>
                        <span class="unit">个</span>
                    </div>
                    <div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
                        <img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
                        <span class="text" style="">在用装备数:</span>
                        <span class="num">{{useNum}}</span>
                        <span class="unit">台</span>
                    </div>
                </div> 
            </div>
            <div class="tableHeader">
                <div class="header" style="width: 10%;">排名</div>
                <div class="header" style="width: 25%;">工程名称</div>
                <div class="header" style="width: 20%;">在用装备数(台)</div>
                <div class="header">投资额(万元)</div>
                <div class="header">现场人员(人)</div>
                <div class="header">风险等级</div>
                <div class="header">地理特征</div>
            </div>
            <div class="tableBox">
                <div class="tableTr" v-for="(item,index) in tableList" :key="index">
                    <div class="tableTd" style="width: 10%;font-weight: 800;">
                        {{ index+1 }}
                    </div>
                    <div class="tableTd" style="width: 25%;">
                        {{ item.projectName }}
                    </div>
                    <div class="tableTd" style="width: 20%;">
                        {{ item.useNum }}
                    </div>
                    <div class="tableTd">
                        {{ (item.investAmount/10000).toFixed(2) }}
                    </div>
                    <div class="tableTd">
                        {{ item.scenePersonNum }}
                    </div>
                    <div class="tableTd">
                        {{ item.riskLevel }}
                    </div>
                    <div class="tableTd">
                        {{ item.geoFeature }}
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script> 
import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen"; 
import { getUsageStatisticsApi } from '@/api/wsScreen'

export default {
    data() {
        return {
            tabIndex:1,
            total:0,
            useNum:0,
            tableList:[],
            selectId:"",
            options:[]
        }
    },
    created() { 
        
    },
    mounted() {
        this.getVoltageLevel()
        this.getEquipmentInUseInTheProject() 
    },
    methods: {
        changeSelect(){
            console.log(this.selectId)
            this.getEquipmentInUseInTheProject()
        },
        changTab(index){
            this.tabIndex=index;
            this.selectId=""
            this.getEquipmentInUseInTheProject()
        },
        
        getEquipmentInUseInTheProject(){
            let param = {companyId:sessionStorage.getItem('companyId'),typeId:this.tabIndex,voltageLevel:this.selectId}
            console.log(param)
            equipmentInUseInTheProjectApi(param).then(response => {
                console.log(response,'equipmentInUseInTheProjectApi')
                if(response.code==200){
                    this.total = response.data.total
                    this.useNum = response.data.useNum
                    this.tableList = response.data.list
                }
            });
        },
        getVoltageLevel(){
            getVoltageLevelApi({}).then(response => {
                console.log(response,'getVoltageLevelApi')
                if(response.code==200){
                    if(response.data&&response.data.length>0){
                        // response.data.forEach(item=>{
                        //     let obj = {
                        //         label:item.voltage+'kV',
                        //         value:item.voltage
                        //     }
                        //     this.options.push(obj)
                        // })
                        this.options = response.data
                        // this.$set(this,'selectId',response.data[0].voltage)
                    }
                }
                
            });
        } 
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%; 
    background-image: url("../../../../../assets/cityScreen/engineerUsingBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}   
.content-title{
    width: 100%;
    height: 18%;
    position: relative;
    color: #78D6FF;
}
.title{
    font-size: 24px;
    position: absolute;
    top: 23%;
    left: 8%;
}
.select-view{
    width: 15%;
    height: 54%;
    position: absolute;
    top: 4%;
    right: 2%;
}  
.select-box {
  width: 70%; /*设置宽度确保内容 和 下拉icon的距离*/ 
  height: 75%;
  background: #113F67;
  color: #ccc;
  border: none;
  border-radius: 10%;
  border-color: #113F67;
  font-size: 20px;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  option { 
    font-size: 20px;
    border: none; 
  }
}

.content-view{
    width: 100%;
    height: 85%; 
    padding-left: 5%;
}
.topView{
    width: 100%;
    height: 16%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fs-24{
    font-size: 24px;
}
.topTab1{
    width: 33%;
    height: 80%; 
    color: #45ADF1; 
    background-image: url("../../../../../assets/cityScreen/tab11.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    display: flex; 
    align-items: center;
    justify-content: center; 
}
.topTab2{
    width: 33%;
    height: 80%; 
    color: #45ADF1; 
    background-image: url("../../../../../assets/cityScreen/tab21.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    display: flex; 
    align-items: center;
    justify-content: center; 
}
.topTab3{
    width: 33%;
    height: 80%; 
    color: #45ADF1; 
    background-image: url("../../../../../assets/cityScreen/tab31.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    display: flex; 
    align-items: center;
    justify-content: center; 
}
.active1{
    background-image: url("../../../../../assets/cityScreen/tab12.png");
}
.active2{
    background-image: url("../../../../../assets/cityScreen/tab22.png");
}
.active3{
    background-image: url("../../../../../assets/cityScreen/tab32.png");
}

.text{
    color: #C0C2C6;
    font-size: 26px;
}
.num{
    color: #83D3F8;
    font-size: 24px;
    font-weight: 600;
    margin: 0 10px;
}
.unit{
    font-size: 16px;
    color: #ccc; 
}
.icon{
    width: 70px;
    height: 70px;
}

.tableHeader{
    width: 100%;
    height: 12%; 
    background-image: url("../../../../../assets/cityScreen/tableHeader.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
}
.tableBox{
    width: 100%;
    height: 76%; 
    overflow-y: auto;
}
.tableTr{
    width: 100%;
    height: 18%; 
    background-image: url("../../../../../assets/cityScreen/tableTr.png");
    background-size: 100% 100%;
    margin-bottom: 2px;
    display: flex;
}
.tableTd{
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header{
    color: #72B1F1;
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
::-webkit-scrollbar{
  width: 4px;
  height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
}

@media screen and (min-width: 1080px) { 
    .title{
        font-size: 10px; 
    } 
    .header{ 
        font-size: 10px;
    } 
    .num{
        color: #83D3F8;
        font-size: 12px;
        margin: 0 2px;
    }
    .unit{
        font-size: 8px; 
    }
    .icon{
        width: 35px;
        height: 35px;
    }
    .text{ 
        font-size: 10px;
    }
    .tableTd{ 
        font-size: 8px; 
    }
    .fs-24{
        font-size: 8px;
    }
    .select-box {
        font-size: 10px; 
        option { 
            font-size: 10px; 
        }
    }
}
@media screen and (min-width: 3000px) { 
    .title{
        font-size: 24px;
    }
    .header{ 
        font-size: 26px;
    } 
    .num{
        color: #83D3F8;
        font-size: 26px;
        margin: 0 10px;
    }
    .unit{
        font-size: 16px; 
    }
    .icon{
        width: 70px;
        height: 70px;
    }
    .text{ 
        font-size: 26px;
    }
    .tableTd{ 
        font-size: 24px; 
    }
    .fs-24{
        font-size: 24px;
    }
    .select-box {
        font-size: 20px; 
        option { 
            font-size: 20px; 
        }
    }
}


</style>