<template>
<div class="publicContainerA">
<div class="partTitleHM">项目评估</div>
<div class="ConstrucClass">
<div class="WaterList">
<div class="DropdownBox">
<div class="analysis">
<img :src="pipefx" alt="" class="ICON_zp" />
<span>片区分析</span>
</div>
<div class="Selectionbox">
<el-form-item prop="area" style="width: 41%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.area" placeholder="请选择片区分析" @change="changeArea">
<el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="pipe" style="width: 50%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.pipe" @change="change" placeholder="请选择">
<el-option v-for="item in pipeList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</div>
</div>
<div class="DropdownBox">
<div class="analysis">
<img :src="xmfx" alt="" class="ICON_zp" />
<span>项目分析</span>
</div>
<div class="Selectionbox">
<el-form-item prop="Xm" style="width: 41%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.XmP" placeholder="请选择项目分析" @change="changeProject">
<el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="XmA" style="width: 50%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.XmA">
<el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</div>
</div>
<div class="DropdownBox">
<div class="analysis">
<img :src="ssfx" alt="" class="ICON_zp" />
<span @click="textClick">设施分析</span>
</div>
<div class="Selectionbox">
<el-form-item prop="XmQ" style="width: 41%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.Xm" placeholder="请选择设施分析" @change="changeSSFX">
<el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="XmAQ" style="width: 50%; margin-left: 10px; margin-top: 18px">
<el-select v-model="queryParams.XmAQ" @change="change" placeholder="请选择">
<el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</div>
</div>
<!-- 设施分析echarts -->
<div class="assessment">
<AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
</div>
<div class="DropdownBox">
<div class="analysis">
<img :src="WaterAnalysis_icon" alt="" class="ICON_zp" />
<span @click="jishuiClick">积水分析</span>
</div>
<div class="Selectionbox">
<el-form-item prop="BODName" style="width: 220px; margin-left: 60px; margin-top: 18px">
<el-select v-model="queryParams.BODName" placeholder="请选择积水分析" @change="jishuichange">
<el-option v-for="item in ListBod" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</div>
</div>
<!-- 积水分析echarts -->
<div class="assessment" v-if="jishui">
<AssessmentjsEcharts :data="chartData1" :refresh="chartData1.refresh1"></AssessmentjsEcharts>
</div>
</div>
</div>
</div>
</template>
<script setup>
import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 设施分析
import AssessmentjsEcharts from '@/views/sponeScreen/Echarts/AssessmentjsEcharts.vue'; //积水分析
import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
import bus from '@/bus';
import WaterAnalysis_icon from '@/assets/newImgs/HMScreen/WaterAnalysis_icon.png';
const jishui = ref(true);
const chartData2 = ref({
xAxis: [
'06-12 08:00',
'06-12 09:00',
'06-12 10:00',
'06-12 11:00',
'06-12 12:00',
'06-12 13:00',
'06-12 14:00',
'06-12 15:00',
'06-12 16:00',
'06-12 17:00',
'06-12 18:00',
'06-12 19:00',
],
inverse: true,
yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
yAxis3: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
refresh: 1,
});
const chartData1 = ref({
xAxis: [
'2024-06-12 08:00',
'2024-06-13 08:00',
'2024-06-14 08:00',
'2024-06-15 08:00',
'2024-06-16 08:00',
'2024-06-17 08:00',
'2024-06-18 08:00',
'2024-06-19 08:00',
'2024-06-20 08:00',
],
yAxis: [1.1, 1.3, 2, 1.25, 1.1, 3, 3.5, 1.3, 3.8, 1.2, 2, 1], //降雨量
yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
refresh: 1,
});
const ListBod = ref([
{ name: '明伦桥俩侧积水点', value: '1' },
{ name: '复兴大道四季城积水点', value: '2' },
]);
const areaList = ref([
{ name: '古城片区', value: '0', lonlat: [114.35, 34.802] },
{ name: '城东南片区', value: '1', lonlat: [114.37, 34.792] },
{ name: '保税区片区', value: '2', lonlat: [114.209, 34.782] },
]);
const pipeList = ref([
{ name: '向阳路管网监测点', value: '1' },
{ name: '汴京路管网监测点', value: '2' },
]);
const XmList = ref([
{ name: '汴京路管网及道路海绵化改造', value: '1' },
{ name: '市民综合体', value: '3' },
]);
const XmListA = ref([
{ name: '出口监测点', value: '1' },
{ name: '进口监测点', value: '2' },
]);
const AllData = reactive({
queryParams: { BODName: '1', area: '', pipe: '', Xm: '1', XmP: '', XmA: '', XmQ: '1', XmAQ: '1' },
});
const { queryParams } = toRefs(AllData);
function jishuiClick() {
jishui.value = false;
}
const jishuichange = () => {
jishui.value = true;
};
const change = val => {
jishui.value = false;
};
// 片区分析点击
function changeArea(val) {
bus.emit('checkProjectArea', areaList.value[val]);
newfiberMapbox.map.easeTo({
center: areaList.value[val].lonlat,
zoom: 13.9,
pitch: 30,
});
}
// 典型项目点击
function changeProject(val) {
bus.emit('checkProjectFX', XmList.value[val]);
// newfiberMapbox.map.easeTo({
// center: [114.381601, 34.793947],
// zoom: 15.9,
// pitch: 30,
// });
}
// 项目设施分析点击
function changeSSFX(val) {
bus.emit('checkSSFX', XmList.value[val]);
newfiberMapbox.map.easeTo({
center: [114.381601, 34.793947],
zoom: 15.9,
pitch: 30,
});
}
</script>
<style lang="scss" scoped>
.publicContainerA {
margin-top: 10px;
}
.ConstrucClass {
width: 460px;
height: calc(100vh - 220px);
background: #004565;
opacity: 0.8;
overflow-x: hidden;
overflow-y: auto;
margin-top: -3px;
.WaterAccumulation {
width: 95%;
// height: 270px;
margin: auto;
background: yellow;
.HeadContent {
width: 100%;
height: 40px;
background: #217dc8;
border: 1px solid #61aff0;
position: relative;
top: 2px;
span {
position: relative;
top: 8px;
left: 15px;
color: #ffffff;
font-family: Source Han Sans CN;
font-weight: 500;
}
}
}
.WaterList {
position: relative;
top: 8px;
width: 95%;
// height: calc(100vh - 720px);
margin: auto;
// background: yellow;
.DropdownBox {
height: 45px;
background: #217dc8;
border: 1px solid #61aff0;
display: flex;
justify-content: space-around;
margin: 5px;
.analysis {
width: 35%;
display: flex;
align-items: center;
// background: red;
.ICON_zp {
width: 28px;
height: 28px;
position: relative;
top: 32x;
}
}
.Selectionbox {
width: 65%;
display: flex;
align-items: center;
// background: yellowgreen;
}
}
.assessment {
margin-top: 5px;
width: 100%;
height: 260px;
// background: red;
}
}
}
</style>
