128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<template>
|
|
<view class="basic-box">
|
|
<view class="basic-data-select">
|
|
<uni-data-select v-model="selectValue" :localdata="range" @change="selectChage" :clear="false"></uni-data-select>
|
|
</view>
|
|
<view class="project-des">
|
|
<view v-for="(item,index) in tableData" :key="index"
|
|
:style="index % 2 == 0 ? 'width:50%;':'width:50%;'">
|
|
<view style="display:flex;align-items:center;margin:15px 0px;">
|
|
<view class="circle-dot"></view>
|
|
<view class="label-name">
|
|
<text style="opacity:0.5;text-align: center;">{{item.name}}</text>
|
|
<text>{{item.value||"-"}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import selectData from "../../staticData"
|
|
export default {
|
|
props: {
|
|
skInfo: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
list: selectData[0],
|
|
range: [{
|
|
value: 0,
|
|
text: "水库"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "主坝"
|
|
},
|
|
{
|
|
value: 2,
|
|
text: "副坝"
|
|
},
|
|
{
|
|
value: 3,
|
|
text: "溢洪道"
|
|
},
|
|
{
|
|
value: 4,
|
|
text: "灌溉发电洞"
|
|
},
|
|
{
|
|
value: 5,
|
|
text: "放空洞"
|
|
},
|
|
{
|
|
value: 6,
|
|
text: "拦洪坝"
|
|
},
|
|
{
|
|
value: 7,
|
|
text: "防汛道路"
|
|
}
|
|
],
|
|
selectValue: 0
|
|
}
|
|
},
|
|
methods: {
|
|
selectChage(e) {
|
|
this.selectChage = e
|
|
this.list = selectData[e]
|
|
}
|
|
},
|
|
computed: {
|
|
tableData() {
|
|
return this.list.map(item => {
|
|
return {
|
|
name: item.name,
|
|
value: this.skInfo[item.key]
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.basic-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.basic-data-select {
|
|
width: 40%;
|
|
margin-top: 10px;
|
|
margin-left: auto;
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.project-des {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border: 1px solid #f2f2f2;
|
|
background-color: #ffffff;
|
|
padding: 0 10px;
|
|
max-height: calc(100vh - 190px);
|
|
overflow: auto;
|
|
|
|
.circle-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #409eff;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.label-name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
flex: 1
|
|
}
|
|
}
|
|
</style> |