232 lines
6.7 KiB
Vue
232 lines
6.7 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"
|
||
const gmObj = {
|
||
"1": "大 (1)型",
|
||
"2": "大 (2)型",
|
||
"3": "中型",
|
||
"4": "小 (1)型",
|
||
"5": "小 (2)型",
|
||
"9": "其他",
|
||
}
|
||
|
||
const qdObj = {
|
||
1: "Ⅰ",
|
||
2: "Ⅱ",
|
||
3: "Ⅲ",
|
||
4: "Ⅳ",
|
||
5: "VI ",
|
||
}
|
||
export default {
|
||
props: {
|
||
skInfo: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
value:{
|
||
type: String,
|
||
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,
|
||
keyObj: {}
|
||
}
|
||
},
|
||
methods: {
|
||
selectChage(e) {
|
||
console.log("e",e);
|
||
this.selectValue = e
|
||
this.list = selectData[e]
|
||
if (e == 0) {
|
||
this.keyObj = this.skInfo;
|
||
} else if (e == 1 || e == 2 || e == 6) {
|
||
this.getDbData(e)
|
||
} else if (e == 3) {
|
||
this.getyhdData()
|
||
} else if (e == 4 || e == 5) {
|
||
this.getfdData(e)
|
||
} else {
|
||
this.getfxdData(e)
|
||
}
|
||
},
|
||
// 主坝，副坝，拦洪坝
|
||
async getDbData(e) {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post('/gunshiApp/tsg/attDamBase/list')
|
||
if (data.code == 200) {
|
||
if (e == 1) {
|
||
this.keyObj = data.data.find(item => item.isMain == 1)
|
||
} else if (e == 2) {
|
||
this.keyObj = data.data.find(item => item.isMain == 0)
|
||
} else {
|
||
this.keyObj = data.data.find(item => item.isMain == 2)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
},
|
||
// 溢洪道
|
||
async getyhdData(e) {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post('/gunshiApp/tsg/attSpillwayBase/list')
|
||
if (data.code == 200) {
|
||
this.keyObj = data.data[0]
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
},
|
||
// 灌溉发电洞 放空洞
|
||
async getfdData(e) {
|
||
try {
|
||
const params = e == 5 ? 1 : 2;
|
||
const {
|
||
data
|
||
} = await uni.$http.get('/gunshiApp/tsg/resTunnel/list',{type:params})
|
||
if (data.code == 200) {
|
||
this.keyObj = data.data[0]
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
},
|
||
// 防汛道路
|
||
async getfxdData(e) {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post('/gunshiApp/tsg/resFloodRoad/list')
|
||
if (data.code == 200) {
|
||
this.keyObj = data.data[0]
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
tableData() {
|
||
return this.list.map(item => {
|
||
if (item.key == "engScal") {
|
||
this.keyObj[item.key] = gmObj[this.skInfo[item.key]]
|
||
}
|
||
if (item.key == "seismicIntensity") {
|
||
this.keyObj[item.key] = qdObj[this.skInfo[item.key]]
|
||
}
|
||
return {
|
||
name: item.name,
|
||
value: this.keyObj[item.key]
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
this.keyObj = this.skInfo;
|
||
if(this.value){
|
||
this.selectChage(this.value - 0)
|
||
}
|
||
},
|
||
|
||
}
|
||
</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> |