400 lines
11 KiB
Vue
400 lines
11 KiB
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";
|
||
|
|
|
||
|
|
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.$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: 21%;
|
||
|
|
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>
|