<template>
<transition name="fade1">
<div class="W_LeftBox"
v-show="TuLiisShow"
:class="[sysTheme ? 'dark_W_LeftBox' : '']">
<p class="LeftTreeTitle">基本信息</p>
<div class="Left1Tree">
<div v-for="(item, index) in Treedata"
:key="index"
class="OneTreeBox"
:class="[sysTheme ? 'dark_OneTreeBox' : '']">
<n-checkbox v-model:checked="item.checked"
@update:checked="updateCheckedKeys(item)"
v-if="item.children == null || item.children.length == 0"
class="OneTree">
{{ item.label }}
</n-checkbox>
<n-collapse v-else>
<n-collapse-item :title="item.label"
:name="index">
<div v-for="(item2, index2) in item.children"
:key="index2"
class="TwoTree">
<n-checkbox v-model:checked="item2.checked"
@update:checked="updateCheckedKeys(item2)">
{{ item2.label }}
</n-checkbox>
</div>
</n-collapse-item>
</n-collapse>
</div>
</div>
</div>
</transition>
<div id="TuLiBox"
@click="TuLiisShow = !TuLiisShow">
显示/隐藏
</div>
<div id="Title">
<div :class="['box_tab_item', TitleActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in TitleData"
:key="index"
@click="TitleClick(index)"> {{item}}
</div>
</div>
<div id="leftBox"
ref="leftBoxHiddenRef">
<div id="Box1">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 机场河水评价</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 机场河污水处理厂运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 汉口片区易涝点水情</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 机场河生态补水路径</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==0">
<div class="box1_list">
<div class="box1_list_item">
<div>地表水质:</div>
<div class="box1_color1">IV类</div>
</div>
<div class="box1_list_item">
<div>总体情况:</div>
<div class="box1_color2">达标</div>
</div>
</div>
<div class="box_tab">
<div :class="['box_tab_item', box1ActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in box1ListData"
:key="index"
@click="box1Click(index)">
<div>{{item.name}}</div>
<div>{{item.level}}</div>
</div>
</div>
<div class="box1_main"
v-if="box1ActiveIndex==0">
<div class="box1_main_item"
v-for="(item,index) in box1Data"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box1ActiveIndex==1">
<div class="box1_main_item"
v-for="(item,index) in box1Data2"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box1ActiveIndex==2">
<div class="box1_main_item"
v-for="(item,index) in box1Data3"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box1ActiveIndex==3">
<div class="box1_main_item"
v-for="(item,index) in box1Data4"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==1">
<div class="box_tab">
<div :class="['ps_box_tab_item', ps_box1ActiveIndex == index?'ps_box_tab_item_active':'' ]"
v-for="(item,index) in ps_box1ListData"
:key="index"
@click="ps_box1Click(index)">
<div>{{item.name}}</div>
<div v-if="item.type">{{item.type}}</div>
</div>
</div>
<div class="ps_box1_list">
<div class="ps_box1_list_font1">日处理水量</div>
<div class="ps_box1_list_bg">
<div class="ps_box1_list_bg2"></div>
<div class="ps_box1_list_mark">70%</div>
</div>
<div class="ps_box1_list_font1">1578.9m³</div>
</div>
<div class="ps_box1_main">
<div class="ps_box1_main_enter">
<img class="ps_img"
src="/src/assets/imgs/enter_iocn.png"
alt="">
<div class="ps_box1_main_font1">未达标</div>
<div class="ps_box1_main_line"></div>
<div class="ps_box1_main_font3">进水水质</div>
</div>
<div class="ps_box1_main_go">
<img class="ps_img"
src="/src/assets/imgs/go_iocn.png"
alt="">
<div class="ps_box1_main_font2">已达标</div>
<div class="ps_box1_main_line"></div>
<div class="ps_box1_main_font3">出水水质</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box1ActiveIndex==0">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box1GoClick(index)"
:class="['ps_box1_main_font4', ps_box1GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box1GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box1GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box1ActiveIndex==1">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box1GoClick(index)"
:class="['ps_box1_main_font4', ps_box1GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data2"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box1GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box1GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box1ActiveIndex==2">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box1GoClick(index)"
:class="['ps_box1_main_font4', ps_box1GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data3"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box1GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box1GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
</div>
</div>
<Wplbox1Line v-show="TitleActiveIndex==2" />
<div class="box_main"
v-if="TitleActiveIndex==3">
<div class="bs_box_bg"></div>
</div>
</div>
<div id="Box2">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 机场河明渠/暗涵水情</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 机场河（污水泵站）运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 机场河明渠/暗涵水情</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 机场河明渠水情</div>
</div>
<Wzhbox2Line v-show="TitleActiveIndex==0" />
<div class="box_main"
v-show="TitleActiveIndex==1">
<div class="ps_box2_main">
<div class="ps_box2_main_item"
v-for="(item,index) in ps_box2Data"
:key="index">
<div>
<div class="ps_box2_main_font1">{{item.name}}</div>
<div class="ps_box2_main_font1">{{item.station}}</div>
</div>
<div class="ps_box2_main_bg">
<div class="ps_box2_main_bg2"
:style="{width: item.rate + '%'}"></div>
<div class="ps_box2_main_mark"
:style="{left: item.rate + '%'}">{{item.rate}}%</div>
</div>
<div class="ps_box2_main_font2">{{item.value}}m³</div>
</div>
</div>
</div>
<Wplbox2Line v-show="TitleActiveIndex==2" />
<Wbsbox2Line v-show="TitleActiveIndex==3" />
</div>
<div id="Box3">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 机场河厂站运行监控</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 机场河污水管网概况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 机场河（雨水泵站）运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 机场河补水泵站运行情况</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==0">
<div class="box_tab">
<div :class="['box_tab_item', box3ActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in box3ListData"
:key="index"
@click="box3Click(index)"> {{item}}
</div>
</div>
<div class="box3_main">
<div style="width: 100%;height: 100%;"
v-if="box3ActiveIndex==0">
<div class="box3_main_item"
v-for="(item,index) in box3Data"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box3ActiveIndex==1">
<div class="box3_main_item"
v-for="(item,index) in box3Data2"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box3ActiveIndex==2">
<div class="box3_main_item"
v-for="(item,index) in box3Data3"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box3ActiveIndex==3">
<div class="box3_main_item"
v-for="(item,index) in box3Data4"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
</div>
</div>
<Wpsbox3Pie v-show="TitleActiveIndex==1" />
<WboxPump :boxdata="pl_box3Data"
v-show="TitleActiveIndex==2" />
<WboxPump :boxdata="bs_box3Data"
v-show="TitleActiveIndex==3" />
</div>
</div>
<div id="rightBox"
ref="rightBoxHiddenRef">
<div id="Box4">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 黄孝河水质评价</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 黄孝河污水处理厂运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 黄机流域年溢流频次</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 黄孝河生态补水路径</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==0">
<div class="box1_list">
<div class="box1_list_item">
<div>地表水质:</div>
<div class="box1_color1">IV类</div>
</div>
<div class="box1_list_item">
<div>总体情况:</div>
<div class="box1_color2">达标</div>
</div>
</div>
<div class="box_tab">
<div :class="['box_tab_items', box4ActiveIndex == index?'box_tab_item_actives':'' ]"
v-for="(item,index) in box4ListData"
:key="index"
@click="box4Click(index)">
<div class="box_tab_items2">
<div>{{item.name}}</div>
<div v-if="item.type">{{item.type}}</div>
</div>
<div>{{item.level}}</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==0">
<div class="box1_main_item"
v-for="(item,index) in box4Data"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==1">
<div class="box1_main_item"
v-for="(item,index) in box1Data"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==2">
<div class="box1_main_item"
v-for="(item,index) in box1Data2"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==3">
<div class="box1_main_item"
v-for="(item,index) in box1Data3"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==4">
<div class="box1_main_item"
v-for="(item,index) in box1Data4"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
<div class="box1_main"
v-if="box4ActiveIndex==5">
<div class="box1_main_item"
v-for="(item,index) in box4Data"
:key="index">
<div class="box1_bar">
<div :class="item.value>item.max?'box1_bar_head':'box1_bar_head1'"></div>
<div :class="item.value>item.max?'box1_bar_body':'box1_bar_body1'"></div>
<div :class="item.value>item.max?'box1_bar_headtrue':'box1_bar_headtrue1'"
:style="{bottom: item.value * 2-4 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_bodytrue':'box1_bar_bodytrue1'"
:style="{height: item.value * 2 + 'px'}"></div>
<div :class="item.value>item.max?'box1_bar_foot':'box1_bar_foot1'"></div>
<div class="box1_bar_font">{{item.value}}</div>
</div>
<div class="box1_main_item_font">
<p>{{item.indicator}}</p>
<p>({{item.section}})</p>
</div>
</div>
</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==1">
<div class="box_tab">
<div :class="['ps_box_tab_item', ps_box4ActiveIndex == index?'ps_box_tab_item_active':'' ]"
v-for="(item,index) in ps_box4ListData"
:key="index"
@click="ps_box4Click(index)">
<div>{{item.name}}</div>
<div v-if="item.type">{{item.type}}</div>
</div>
</div>
<div class="ps_box1_list">
<div class="ps_box1_list_font1">日处理水量</div>
<div class="ps_box1_list_bg">
<div class="ps_box1_list_bg2"></div>
<div class="ps_box1_list_mark">70%</div>
</div>
<div class="ps_box1_list_font1">1578.9m³</div>
</div>
<div class="ps_box1_main">
<div class="ps_box1_main_enter">
<img class="ps_img"
src="/src/assets/imgs/enter_iocn.png"
alt="">
<div class="ps_box1_main_font1">未达标</div>
<div class="ps_box1_main_line"></div>
<div class="ps_box1_main_font3">进水水质</div>
</div>
<div class="ps_box1_main_go">
<img class="ps_img"
src="/src/assets/imgs/go_iocn.png"
alt="">
<div class="ps_box1_main_font2">已达标</div>
<div class="ps_box1_main_line"></div>
<div class="ps_box1_main_font3">出水水质</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box4ActiveIndex==0">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box4GoClick(index)"
:class="['ps_box1_main_font4', ps_box4GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box4GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box4GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box4ActiveIndex==1">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box4GoClick(index)"
:class="['ps_box1_main_font4', ps_box4GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data2"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box4GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box4GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box4ActiveIndex==2">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box4GoClick(index)"
:class="['ps_box1_main_font4', ps_box4GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data3"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box4GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box4GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box4ActiveIndex==3">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box4GoClick(index)"
:class="['ps_box1_main_font4', ps_box4GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box4GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box4GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
<div class="ps_box1_main_data"
v-if="ps_box4ActiveIndex==4">
<div class="ps_box1_main_data_title">
<div v-for="(item,index) in ps_box1GoListData"
:key="index"
@click="ps_box4GoClick(index)"
:class="['ps_box1_main_font4', ps_box4GoActiveIndex == index?'ps_box1_main_font4_active':'' ]">
{{item}}
</div>
</div>
<div class="ps_box1_main_data_title">
<div class="ps_box1_main_font5">水质指标</div>
<div class="ps_box1_main_font5">含量</div>
<div class="ps_box1_main_font5">标准范围</div>
</div>
<div class="ps_box1_main_data_title"
v-for="(item,index) in ps_box1Data2"
:key="index">
<div class="ps_box1_main_font6">{{item.name}}</div>
<div v-if="ps_box4GoActiveIndex==0"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content}}
</div>
<div v-if="ps_box4GoActiveIndex==1"
:class="item.type==1?'ps_box1_main_font7':item.type==2?'ps_box1_main_font8':'ps_box1_main_font9'">
{{item.content2}}
</div>
<div class="ps_box1_main_font6">{{item.range}}</div>
</div>
</div>
</div>
</div>
<Wplbox4Line v-show="TitleActiveIndex==2" />
<div class="box_main"
v-show="TitleActiveIndex==3">
<div class="bs_box_bg2"></div>
</div>
</div>
<div id="Box5">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 黄孝河明渠／暗涵水情</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 黄孝河（污水泵站）运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 黄孝河明渠/暗涵水情</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 黄孝河明渠水情</div>
</div>
<Wzhbox5Line v-show="TitleActiveIndex==0" />
<div class="box_main"
v-show="TitleActiveIndex==1">
<div class="ps_box2_main">
<div class="ps_box2_main_item"
v-for="(item,index) in ps_box5Data"
:key="index">
<div>
<div class="ps_box2_main_font1">{{item.name}}</div>
<div class="ps_box2_main_font1">{{item.station}}</div>
</div>
<div class="ps_box2_main_bg">
<div class="ps_box2_main_bg2"
:style="{width: item.rate + '%'}"></div>
<div class="ps_box2_main_mark"
:style="{left: item.rate + '%'}">{{item.rate}}%</div>
</div>
<div class="ps_box2_main_font2">{{item.value}}m³</div>
</div>
</div>
</div>
<Wplbox5Line v-show="TitleActiveIndex==2" />
<Wbsbox5Line v-show="TitleActiveIndex==3" />
</div>
<div id="Box6">
<div class="box_title">
<div class="box_title_dec"> </div>
<div class="box_title_line"></div>
<div class="box_title_bg"
v-if="TitleActiveIndex==0"> 黄孝河厂站运行监控</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==1"> 黄孝河污水管网概况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==2"> 黄孝河（雨水泵站）运行情况</div>
<div class="box_title_bg"
v-if="TitleActiveIndex==3"> 黄孝河补水泵站运行情况</div>
</div>
<div class="box_main"
v-if="TitleActiveIndex==0">
<div class="box_tab">
<div :class="['box_tab_item', box6ActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in box3ListData"
:key="index"
@click="box6Click(index)"> {{item}}
</div>
</div>
<div class="box3_main">
<div style="width: 100%;height: 100%;"
v-if="box6ActiveIndex==0">
<div class="box3_main_item"
v-for="(item,index) in box3Data"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box6ActiveIndex==1">
<div class="box3_main_item"
v-for="(item,index) in box3Data2"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box6ActiveIndex==2">
<div class="box3_main_item"
v-for="(item,index) in box3Data3"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
<div style="width: 100%;height: 100%;"
v-if="box6ActiveIndex==3">
<div class="box3_main_item"
v-for="(item,index) in box3Data4"
:key="index">
<div class="">
<p class="box3_main_item_font1">标准处理水量</p>
<p class="box3_main_item_font2">{{item.standard}}<span class="box3_main_item_font3">m³</span></p>
</div>
<div class="">
<p class="box3_main_item_font1">当日处理水量</p>
<p class="box3_main_item_font2">{{item.today}}<span class="box3_main_item_font3">m³</span>
</p>
</div>
<div class="">
<p class="box3_main_item_font1">运行负荷</p>
<p :class="item.rate>80?'box3_main_item_font5':item.rate<50?'box3_main_item_font6':'box3_main_item_font4'">
{{item.rate}}%
</p>
</div>
</div>
<div class="box3_main_foot">注：每1小时更新一次</div>
</div>
</div>
</div>
<Wpsbox6Pie v-show="TitleActiveIndex==1" />
<WboxPump :boxdata="pl_box6Data"
v-show="TitleActiveIndex==2" />
<WboxPump :boxdata="bs_box6Data"
v-show="TitleActiveIndex==3" />
</div>
</div>
<div id="CenterBox"
ref="bottomBoxHiddenRef">
<div id="CenterBox_left"></div>
<div id="CenterBox_right"></div>
<div id="CenterBox1">
<div class="centerbox_tab">
<div :class="['box_tab_item', centerbox1ActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in centerbox1ListData"
:key="index"
@click="centerbox1Click(index)"> {{item}}
</div>
</div>
<div class="centerbox_title">机场河cso</div>
<div class="centerbox_item"
v-for="(item,index) in centerboxData"
:key="index">
<div class="centerbox_item_font">{{item.name}}</div>
<div class="centerbox_item_value">{{item.value}}
<span class="centerbox_item_font2"
v-if="item.type==1">10万m³</span>
<span class="centerbox_item_font2"
v-if="item.type==2">/17.5m </span>
<span class="centerbox_item_font2"
v-if="item.type==3">/4m³/s </span>
</div>
</div>
</div>
<div id="CenterBox2">
<div class="centerbox_tab">
<div :class="['box_tab_item', centerbox2ActiveIndex == index?'box_tab_item_active':'' ]"
v-for="(item,index) in centerbox2ListData"
:key="index"
@click="centerbox2Click(index)"> {{item}}
</div>
</div>
<div class="centerbox_title">黄孝河cso</div>
<div class="centerbox_item"
v-for="(item,index) in centerboxData"
:key="index">
<div class="centerbox_item_value">{{item.value}}
<span class="centerbox_item_font2"
v-if="item.type==1">10万m³</span>
<span class="centerbox_item_font2"
v-if="item.type==2">/17.5m </span>
<span class="centerbox_item_font2"
v-if="item.type==3">/4m³/s </span>
</div>
<div class="centerbox_item_font">{{item.name}}</div>
</div>
</div>
<div :class="TitleActiveIndex==0?'CenterRound_zh':[TitleActiveIndex==1?'CenterRound_ps':(TitleActiveIndex==2?'CenterRound_pl':'CenterRound_bs')]">
<div class="CenterRound_main"
v-if="TitleActiveIndex==0">
<div class="CenterRound_main_font1">78%</div>
<div>流域污水处理量</div>
<div style="display: flex;">
<div class="CenterRound_main_font2">146.8839</div>
<div> 万m³</div>
</div>
</div>
<div class="CenterRound_main"
v-if="TitleActiveIndex==1">
<div class="CenterRound_main_font3">88%</div>
<div>流域污水处理量</div>
<div style="display: flex;">
<div class="CenterRound_main_font4">146.8839</div>
<div> 万m³</div>
</div>
</div>
<div class="CenterRound_main"
v-if="TitleActiveIndex==2">
<div class="CenterRound_main_font5">88%</div>
<div>防洪排涝抽排量</div>
<div style="display: flex;">
<div class="CenterRound_main_font6">146.8839</div>
<div> 万m³</div>
</div>
</div>
<div class="CenterRound_main"
v-if="TitleActiveIndex==3">
<div class="CenterRound_main_font7">48%</div>
<div>流域生态补水量</div>
<div style="display: flex;">
<div class="CenterRound_main_font8">46.8839</div>
<div> 万m³</div>
</div>
</div>
<div class="CenterRound_box"
v-if="TitleActiveIndex==0">
<div class="CenterRound_box_item">
<div>机场河</div>
<div style="display: flex;">
<div style="color: #4EDDF2;">76.39</div>
<div>万m³</div>
</div>
</div>
<div class="CenterRound_box_item">
<div>黄孝河</div>
<div style="display: flex;">
<div style="color: #4EDDF2;">76.39</div>
<div>万m³</div>
</div>
</div>
</div>
</div>
</div>
<div id="Foot"></div>
<div id="LeftButton"
@click="showClick()"
ref="ShowAndHiddenRef">› </div>
</template>
<script>
import {
ref,
reactive,
toRefs,
onMounted,
computed,
nextTick
} from "vue";
import {
useStore
} from "vuex";
import bus from "@/utils/util";
import Wzhbox2Line from '../../../views/WatershedOneMap/components/W_Box_zh2Line.vue';
import Wzhbox5Line from '../../../views/WatershedOneMap/components/W_Box_zh5Line.vue';
import Wpsbox3Pie from '../../../views/WatershedOneMap/components/W_Box_ps3Pie.vue';
import Wpsbox6Pie from '../../../views/WatershedOneMap/components/W_Box_ps6Pie.vue';
import Wplbox1Line from '../../../views/WatershedOneMap/components/W_Box_pl1Line.vue';
import Wplbox2Line from '../../../views/WatershedOneMap/components/W_Box_pl2Line.vue';
import Wplbox4Line from '../../../views/WatershedOneMap/components/W_Box_pl4Line.vue';
import Wplbox5Line from '../../../views/WatershedOneMap/components/W_Box_pl5Line.vue';
import Wbsbox2Line from '../../../views/WatershedOneMap/components/W_Box_bs2Line.vue';
import Wbsbox5Line from '../../../views/WatershedOneMap/components/W_Box_bs5Line.vue';
import WboxPump from '../../../views/WatershedOneMap/components/W_Box_pump.vue';
export default {
name: "W_LeftBox",
components: {
Wzhbox2Line,
Wzhbox5Line,
Wpsbox3Pie,
Wpsbox6Pie,
Wplbox1Line,
Wplbox2Line,
Wplbox4Line,
Wplbox5Line,
Wbsbox2Line,
Wbsbox5Line,
WboxPump
},
setup() {
let store = useStore();
let ShowAndHiddenRef = ref(null);
let leftBoxHiddenRef = ref(null);
let rightBoxHiddenRef = ref(null);
let bottomBoxHiddenRef = ref(null);
const AllData = reactive({
isShow: true,
TitleActiveIndex: 1,
TitleData: ['综合一张图', '排水系统', '排涝系统', '补水系统'],
box1ActiveIndex: 0,
box3ActiveIndex: 0,
box4ActiveIndex: 0,
box6ActiveIndex: 0,
centerbox1ActiveIndex: 0,
centerbox2ActiveIndex: 0,
ps_box1ActiveIndex: 0,
ps_box4ActiveIndex: 0,
ps_box1GoActiveIndex: 0,
ps_box4GoActiveIndex: 0,
ps_box1GoListData: ['进水口', '出水口'],
ps_box1ListData: [{
name: '汉西'
}, {
name: '李家墩',
type: '临时处理设施'
}, {
name: '将军路',
type: '临时污水设施'
}],
ps_box4ListData: [{
name: '三金潭'
}, {
name: '铁路桥',
type: '地下净化水厂'
}, {
name: '铁路桥',
type: '分散'
},
{
name: '机场河',
type: '分散'
},
{
name: '建设渠',
type: '分散'
}
],
ps_box1Data: [{
type: 1,
name: '氨 氮',
content: '147.79mg/L',
content2: '137.24mg/L',
range: '80-100'
}, {
type: 2,
name: '总 磷',
content: '208.89mg/L',
content2: '177.35mg/L',
range: '100-300'
}, {
type: 3,
name: '总 氮',
content: '157.79mg/L',
content2: '167.32mg/L',
range: '100-200'
}],
ps_box1Data2: [{
type: 1,
name: '氨 氮',
content: '123.79mg/L',
content2: '113.24mg/L',
range: '80-100'
}, {
type: 2,
name: '总 磷',
content: '123.89mg/L',
content2: '112.35mg/L',
range: '100-300'
}, {
type: 3,
name: '总 氮',
content: '124.79mg/L',
content2: '124.32mg/L',
range: '100-200'
}],
ps_box1Data3: [{
type: 1,
name: '氨 氮',
content: '125.79mg/L',
content2: '121.24mg/L',
range: '80-100'
}, {
type: 2,
name: '总 磷',
content: '164.89mg/L',
content2: '126.35mg/L',
range: '100-300'
}, {
type: 3,
name: '总 氮',
content: '163.79mg/L',
content2: '174.32mg/L',
range: '100-200'
}],
box1ListData: [{
name: '东渠上游',
level: 'V类'
}, {
name: '东渠下游',
level: '劣IV类'
}, {
name: '西渠上游',
level: 'V类'
}, {
name: '西渠下游',
level: 'V类'
}],
box1Data: [{
value: 10,
max: 9,
indicator: 'PH',
section: '6-9'
}, {
value: 31,
max: 40,
indicator: 'COD',
section: '30-40'
}, {
value: 1.6,
max: 2,
indicator: '氨氮',
section: '1.5-2.0'
}, {
value: 0.31,
max: 0.4,
indicator: '总磷',
section: '0.3-0.4'
}, {
value: 2.1,
max: 3,
indicator: 'DO',
section: '2-3'
}],
box1Data2: [{
value: 9,
max: 9,
indicator: 'PH',
section: '6-9'
}, {
value: 32,
max: 40,
indicator: 'COD',
section: '30-40'
}, {
value: 1.8,
max: 2,
indicator: '氨氮',
section: '1.5-2.0'
}, {
value: 0.34,
max: 0.4,
indicator: '总磷',
section: '0.3-0.4'
}, {
value: 2.8,
max: 3,
indicator: 'DO',
section: '2-3'
}],
box1Data3: [{
value: 8.4,
max: 9,
indicator: 'PH',
section: '6-9'
}, {
value: 30,
max: 40,
indicator: 'COD',
section: '30-40'
}, {
value: 2.1,
max: 2,
indicator: '氨氮',
section: '1.5-2.0'
}, {
value: 0.41,
max: 0.4,
indicator: '总磷',
section: '0.3-0.4'
}, {
value: 2.4,
max: 3,
indicator: 'DO',
section: '2-3'
}],
box1Data4: [{
value: 6.4,
max: 9,
indicator: 'PH',
section: '6-9'
}, {
value: 30,
max: 40,
indicator: 'COD',
section: '30-40'
}, {
value: 1.7,
max: 2,
indicator: '氨氮',
section: '1.5-2.0'
}, {
value: 0.36,
max: 0.4,
indicator: '总磷',
section: '0.3-0.4'
}, {
value: 3.1,
max: 3,
indicator: 'DO',
section: '2-3'
}],
box4ListData: [{
name: '兴业路',
level: 'V类'
}, {
name: '后湖大道',
level: 'V类'
}, {
name: '金桥大道',
level: '劣IV类'
}, {
name: '建设大道',
level: 'V类'
}, {
name: '黄孝河',
type: '末端',
level: 'V类'
}, {
name: '塔子湖',
type: '明渠',
level: 'V类'
}],
box4Data: [{
value: 7,
max: 9,
indicator: 'PH',
section: '6-9'
}, {
value: 30,
max: 40,
indicator: 'COD',
section: '30-40'
}, {
value: 2.1,
max: 2,
indicator: '氨氮',
section: '1.5-2.0'
}, {
value: 0.3,
max: 0.4,
indicator: '总磷',
section: '0.3-0.4'
}, {
value: 2.7,
max: 3,
indicator: 'DO',
section: '2-3'
}],
ps_box2Data: [{
name: '古田二路',
station: '污水泵站',
value: 1578.9,
rate: 60
},
{
name: '王家墩',
station: '污水泵站',
value: 1878.9,
rate: 70
},
{
name: '常青花园',
station: '污水泵站',
value: 1666.9,
rate: 80
},
{
name: '长青北路',
station: '污水泵站',
value: 1876.9,
rate: 66
}
],
ps_box5Data: [{
name: '铁路桥',
station: '污水泵站',
value: 1578.9,
rate: 60
},
{
name: '石桥',
station: '污水泵站',
value: 1876.9,
rate: 66
},
{
name: '建设渠',
station: '污水泵站',
value: 1666.9,
rate: 80
},
{
name: '张公堤',
station: '污水泵站',
value: 1878.9,
rate: 70
}
],
box3ListData: ['污水处理厂', '污水泵站', '临时分散设施', '排涝泵站'],
box3Data: [{
standard: 150000,
today: 360000,
rate: 80
}, {
standard: 150000,
today: 360000,
rate: 86.7
}, {
standard: 150000,
today: 360000,
rate: 40
}],
box3Data2: [{
standard: 160000,
today: 200000,
rate: 30
}, {
standard: 160000,
today: 2000000,
rate: 66.6
}, {
standard: 160000,
today: 2000000,
rate: 50
}],
box3Data3: [{
standard: 175453,
today: 2345678,
rate: 45
}, {
standard: 175453,
today: 2345678,
rate: 77.7
}, {
standard: 175453,
today: 2345678,
rate: 60
}],
box3Data4: [{
standard: 53761,
today: 12356,
rate: 74
}, {
standard: 53761,
today: 12356,
rate: 88.8
}, {
standard: 53761,
today: 12356,
rate: 70
}],
centerbox1ListData: ['常青花园调蓄池', '调蓄及强化处理'],
centerbox2ListData: ['ｃｓｏ１调蓄池', '调蓄及强化处理'],
centerboxData: [{
name: '负荷能力',
value: '85%',
type: 0
}, {
name: '调蓄能力',
value: 8.5,
type: 1
}, {
name: '水池液位',
value: 14.5,
type: 2
}, {
name: '处理能力',
value: 3.4,
type: 3
}],
Treedata: [{
key: "3_1",
label: "自然水系",
checked: true,
value: "gis_water_wuhan",
},
{
key: "2_1",
label: "明渠",
checked: true,
value: "gis_mingqu",
},
{
key: "1_1",
label: "暗渠",
checked: true,
value: "gis_anqu",
},
{
key: "0_1",
label: "管网",
checked: true,
value: "gis_guanqu",
},
{
key: "4_1",
label: "雨水分区",
children: [{
key: "41",
label: "一级分区",
checked: false,
value: "yushuifenqu_v1",
},
{
key: "42",
label: "二级分区",
checked: false,
value: "yushuifenqu_v2",
},
{
key: "43",
label: "三级分区",
checked: false,
value: "yushuifenqu_v3",
},
],
},
{
key: "5",
label: "污水分区",
children: [{
key: "51",
label: "一级分区",
checked: false,
value: "wushuifenqu_v1",
},
{
key: "52",
label: "二级分区",
checked: false,
value: "wushuifenqu_v2",
},
{
key: "53",
label: "三级分区",
checked: false,
value: "wushuifenqu_v3",
},
],
},
{
key: "6",
label: "行政区",
checked: false,
value: "xingzhengfenqu_v1",
},
{
key: "7",
label: "设施设备",
children: [{
key: "71",
label: "泵站",
checked: true,
value: "泵站",
},
{
key: "72",
label: "调蓄池",
checked: true,
value: "调蓄池",
},
// {
// key: "73",
// label: "排口",
// checked: false,
// },
{
key: "74",
label: "闸门",
checked: true,
value: "闸门",
},
{
key: "75",
label: "处理设施",
checked: true,
value: "处理设施",
},
],
},
{
key: "8",
label: "监测设备",
children: [{
key: "81",
label: "雨量",
checked: false,
value: "雨量监测站",
},
{
key: "82",
label: "流量",
checked: false,
value: "流量监测站",
},
{
key: "83",
label: "液位",
checked: false,
value: "液位监测站",
},
{
key: "84",
label: "水质",
checked: false,
value: "水质监测站",
},
],
},
],
sysTheme: "",
TuLiisShow: false,
pl_box3Data: {
name: '长青泵站',
value: 1578.9,
rate: 60,
total: 678.9,
water: 8.9,
pump: [{
name: '1#泵',
src: '/src/assets/imgs/pl_icon2.png'
}, {
name: '2#泵',
src: '/src/assets/imgs/pl_icon1.png'
}, {
name: '3#泵',
src: '/src/assets/imgs/pl_icon3.png'
}, {
name: '4#泵',
src: '/src/assets/imgs/pl_icon4.png'
}, {
name: '5#泵',
src: '/src/assets/imgs/pl_icon2.png'
}]
},
pl_box6Data: {
name: '后湖泵站',
value: 1578.9,
rate: 70,
total: 678.9,
water: 8.9,
pump: [{
name: '1#泵',
src: '/src/assets/imgs/pl_icon2.png'
}, {
name: '2#泵',
src: '/src/assets/imgs/pl_icon1.png'
}, {
name: '3#泵',
src: '/src/assets/imgs/pl_icon3.png'
}, {
name: '4#泵',
src: '/src/assets/imgs/pl_icon4.png'
}, {
name: '5#泵',
src: '/src/assets/imgs/pl_icon2.png'
}]
},
bs_box3Data: {
value: 1578.9,
rate: 70,
total: 678.9,
water: 8.9,
pump: [{
name: '1#泵',
src: '/src/assets/imgs/pl_icon2.png'
}, {
name: '2#泵',
src: '/src/assets/imgs/pl_icon1.png'
}, {
name: '3#泵',
src: '/src/assets/imgs/pl_icon3.png'
}]
},
bs_box6Data: {
value: 1578.9,
rate: 70,
total: 678.9,
water: 6.9,
pump: [{
name: '1#泵',
src: '/src/assets/imgs/pl_icon2.png'
}, {
name: '2#泵',
src: '/src/assets/imgs/pl_icon1.png'
}, {
name: '3#泵',
src: '/src/assets/imgs/pl_icon3.png'
}]
},
});
const showClick = (index) => {
AllData.isShow = !AllData.isShow;
if (AllData.isShow == true) {
ShowAndHiddenRef.value.className = "Button2";
ShowAndHiddenRef.value.style = "left: 465px;";
leftBoxHiddenRef.value.className = "leftBox2";
rightBoxHiddenRef.value.className = "rightBox2";
bottomBoxHiddenRef.value.className = "bottomBox2";
rightBoxHiddenRef.value.style = "opacity: 1;";
leftBoxHiddenRef.value.style = "opacity: 1;";
bottomBoxHiddenRef.value.style = "opacity: 1;";
} else {
ShowAndHiddenRef.value.className = "Button1";
ShowAndHiddenRef.value.style = "left: 10px;";
leftBoxHiddenRef.value.className = "leftBox1";
rightBoxHiddenRef.value.className = "rightBox1";
bottomBoxHiddenRef.value.className = "bottomBox1";
rightBoxHiddenRef.value.style = "opacity: 0;";
leftBoxHiddenRef.value.style = "opacity: 0;";
bottomBoxHiddenRef.value.style = "opacity: 0;";
}
}
const TitleClick = (index) => {
AllData.TitleActiveIndex = index;
if (AllData.isShow == false) {
AllData.isShow = true;
ShowAndHiddenRef.value.className = "Button2";
ShowAndHiddenRef.value.style = "left: 465px;";
leftBoxHiddenRef.value.className = "leftBox2";
rightBoxHiddenRef.value.className = "rightBox2";
bottomBoxHiddenRef.value.className = "bottomBox2";
rightBoxHiddenRef.value.style = "opacity: 1;";
leftBoxHiddenRef.value.style = "opacity: 1;";
bottomBoxHiddenRef.value.style = "opacity: 1;";
}
}
const box1Click = (index) => {
AllData.box1ActiveIndex = index;
}
const ps_box1Click = (index) => {
AllData.ps_box1ActiveIndex = index;
}
const ps_box4Click = (index) => {
AllData.ps_box4ActiveIndex = index;
}
const ps_box1GoClick = (index) => {
AllData.ps_box1GoActiveIndex = index;
}
const ps_box4GoClick = (index) => {
AllData.ps_box4GoActiveIndex = index;
}
const box3Click = (index) => {
AllData.box3ActiveIndex = index;
}
const box4Click = (index) => {
AllData.box4ActiveIndex = index;
}
const box6Click = (index) => {
AllData.box6ActiveIndex = index;
}
const centerbox1Click = (index) => {
AllData.centerbox1ActiveIndex = index;
}
const centerbox2Click = (index) => {
AllData.centerbox2ActiveIndex = index;
}
AllData.sysTheme = computed(() => {
return store.getters.sysTheme;
});
// 点击左侧Tree结构
function updateCheckedKeys(v) {
mapbox.setLayerVisible([v.value], v.checked);
}
function initLayerVisible() {
let arrs = [];
let trueArr = [];
let falseArr = [];
AllData.Treedata.map((item) => {
if (item.checked != undefined) {
arrs.push(item);
} else {
arrs = arrs.concat(item.children);
}
});
arrs.map((item) => {
if (item.checked) {
trueArr.push(item.value);
} else {
falseArr.push(item.value);
}
});
mapbox.setLayerVisible(trueArr, true);
// mapbox.setLayerVisible(falseArr,false);
}
onMounted(() => {
bus.on("initLayerVisible", initLayerVisible);
// loadSiteList();
});
return {
...toRefs(AllData),
updateCheckedKeys,
TitleClick,
box1Click,
ps_box1Click,
ps_box4Click,
ps_box1GoClick,
ps_box4GoClick,
box3Click,
box4Click,
box6Click,
centerbox1Click,
centerbox2Click,
ShowAndHiddenRef,
leftBoxHiddenRef,
rightBoxHiddenRef,
bottomBoxHiddenRef,
showClick,
};
},
computed: {},
methods: {},
};
</script>
<style lang="less" scoped>
.bs_box_bg {
width: 100%;
height: 100%;
background: url("/src/assets/imgs/bs_path.png") no-repeat center;
background-size: 60% 90%;
}
.bs_box_bg2 {
width: 100%;
height: 100%;
background: url("/src/assets/imgs/bs_path2.png") no-repeat center;
background-size: 60% 90%;
}
.ps_img {
height: 50px;
width: 50px;
}
.pl_img {
height: 18px;
width: 18px;
}
.box_tab_items2 {
height: 30px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.centerbox_tab {
width: 80%;
height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
position: absolute;
left: 10%;
bottom: -35px;
}
.centerbox_title {
position: absolute;
top: -30px;
left: 25%;
text-align: center;
line-height: 24px;
width: 141px;
height: 24px;
background: rgba(12, 191, 191, 0.2);
border-left: 2px solid #0cbfbf;
border-right: 2px solid #0cbfbf;
}
.box_tab {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
padding-top: 10px;
}
.box_tabs {
width: 50%;
margin-left: 40%;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
padding-top: 10px;
}
.box_tabs_bs {
width: 40%;
margin-left: 30%;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
padding-top: 10px;
}
.box_tab_item {
width: 108px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: 400;
color: #03c3c7;
border: 1px solid #3d7790;
}
.box_tab_item_active {
width: 108px;
color: #28f7ff;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: normal;
border: 1px solid #3d7790;
}
.ps_box_tab_item {
width: 85px;
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: 400;
color: #03c3c7;
border: 1px solid #3d7790;
font-size: 13px;
}
.ps_box_tab_item_active {
width: 85px;
height: 45px;
color: #28f7ff;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: normal;
border: 1px solid #3d7790;
font-size: 13px;
}
.box_tab_items {
width: 70px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: 400;
color: #03c3c7;
border: 1px solid #3d7790;
}
.box_tab_item_actives {
width: 70px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
font-weight: normal;
color: #28f7ff;
border: 1px solid #3d7790;
}
.box_main {
width: 455px;
height: 240px;
background: linear-gradient(
99deg,
rgba(0, 54, 77, 0.6) 0%,
#00364d 52%,
rgba(0, 54, 77, 0.6) 100%
);
opacity: 0.8;
position: relative;
}
.box_title {
width: 455px;
height: 30px;
display: flex;
position: relative;
.box_title_dec {
width: 4px;
height: 30px;
background: #0199d9;
}
.box_title_line {
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
background-image: url("/src/assets/imgs/title_line.png");
background-size: 100% 100%;
}
.box_title_bg {
padding-left: 30px;
color: #dafffe;
font-size: 18px;
line-height: 30px;
width: 449px;
height: 30px;
background: linear-gradient(
102deg,
rgba(3, 195, 199, 0.1) 0%,
rgba(3, 195, 199, 0.2) 49%,
rgba(3, 195, 199, 0) 100%
);
opacity: 0.8;
}
}
.ps_box1_list {
height: 20px;
width: 100%;
margin-top: 10px;
color: #7ec7e9;
font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 400;
display: flex;
align-items: center;
.ps_box1_list_bg {
margin: 0 3% 0 1%;
display: flex;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
height: 10px;
width: 60%;
position: relative;
.ps_box1_list_mark {
position: absolute;
font-size: 17px;
color: #ffffff;
width: 47px;
height: 24px;
text-align: center;
line-height: 24px;
background: #024052;
border-radius: 2px;
left: calc(70% - 23px);
bottom: -25px;
}
.ps_box1_list_bg2 {
height: 100%;
width: 70%;
background: linear-gradient(-87deg, #4cffff, #2f5fe9);
border-radius: 2px;
}
}
.ps_box1_list_font1 {
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
}
#Box1,
#Box4 {
width: 100%;
.ps_box1_main {
width: 100%;
height: 130px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-around;
font-family: Alibaba PuHuiTi;
font-weight: bold;
.ps_box1_main_font1 {
font-size: 15px;
font-style: italic;
color: #ff6565;
}
.ps_box1_main_font2 {
font-size: 15px;
font-style: italic;
color: #50ba59;
}
.ps_box1_main_font3 {
font-size: 17px;
color: #b9fcff;
}
.ps_box1_main_font4 {
font-size: 14px;
color: #b9fcff;
position: relative;
width: 40%;
text-align: center;
cursor: pointer;
}
.ps_box1_main_font4_active {
font-size: 14px;
color: #b9fcff;
position: relative;
width: 40%;
text-align: center;
background: url("/src/assets/imgs/active_line.png") no-repeat;
background-size: 100% 2px;
background-position: center bottom;
cursor: pointer;
}
.ps_box1_main_font5 {
font-size: 13px;
color: #61a1be;
width: 30%;
text-align: center;
}
.ps_box1_main_font6 {
font-size: 12px;
color: #94b9c1;
width: 30%;
text-align: center;
}
.ps_box1_main_font7 {
font-size: 12px;
color: #ff6565;
}
.ps_box1_main_font8 {
font-size: 12px;
color: #50ba59;
}
.ps_box1_main_font9 {
font-size: 12px;
color: #ffc527;
}
.ps_box1_main_line {
width: 70px;
height: 2px;
background: #081f47;
}
.ps_box1_main_enter {
width: 22%;
height: 100%;
background: #00364d;
border: 2px solid #ff6666;
box-shadow: 1px 1px 10px inset #ff6666;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
.ps_box1_main_go {
width: 22%;
height: 100%;
background: #00364d;
border: 2px solid rgba(68, 219, 171, 0.9);
box-shadow: 1px 1px 10px inset #44dbab;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
.ps_box1_main_data {
width: 48%;
height: 100%;
background: #00364d;
border-radius: 6px;
box-shadow: 1px 1px 10px inset rgb(71, 229, 251);
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
.ps_box1_main_data_title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
}
}
.box1_main {
width: 100%;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
.box1_main_item {
width: 20%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
position: relative;
.box1_main_item_font {
margin-top: 235px;
position: absolute;
z-index: 11111;
text-align: center;
}
.box1_main_item_font p {
min-width: 50px;
}
.box1_bar {
position: absolute;
height: 95px;
width: 32px;
top: 0;
.box1_bar_font {
position: absolute;
top: 20%;
text-align: center;
width: 100%;
color: #ffffff;
font-size: 13px;
font-weight: bold;
z-index: 1111;
}
.box1_bar_head {
width: 100%;
height: 8px;
background: #d88a70;
border-radius: 50%;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 10;
}
.box1_bar_head1 {
width: 100%;
height: 8px;
background: #1ddcff;
border-radius: 50%;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 10;
}
.box1_bar_body {
position: absolute;
top: 10px;
margin-top: -5px;
opacity: 0.5;
width: 100%;
height: calc(100% - 8px);
background: linear-gradient(
90deg,
#ff581d 0%,
#e7683e 30%,
#d88a70 83%,
#fb5a22 100%
);
}
.box1_bar_body1 {
position: absolute;
top: 10px;
margin-top: -5px;
opacity: 0.5;
width: 100%;
height: calc(100% - 8px);
background: linear-gradient(
90deg,
#0e6090 0%,
#3bace6 30%,
#093b79 83%,
#356bad 100%
);
}
.box1_bar_headtrue {
width: 100%;
position: absolute;
bottom: 57px;
z-index: 112;
height: 8px;
background: #d88a70;
border-radius: 50%;
}
.box1_bar_headtrue1 {
width: 100%;
position: absolute;
bottom: 57px;
z-index: 112;
height: 8px;
background: #1ddcff;
border-radius: 50%;
}
.box1_bar_bodytrue {
position: absolute;
bottom: 0;
width: 100%;
height: 61px;
background: linear-gradient(
90deg,
#ff581d 0%,
#e7683e 30%,
#d88a70 83%,
#fb5a22 100%
);
}
.box1_bar_bodytrue1 {
position: absolute;
bottom: 0;
width: 100%;
height: 61px;
background: linear-gradient(
90deg,
#0e6090 0%,
#3bace6 30%,
#093b79 83%,
#356bad 100%
);
}
.box1_bar_foot {
position: absolute;
bottom: -4px;
width: 100%;
height: 8px;
background: linear-gradient(
90deg,
#ff581d 0%,
#e7683e 30%,
#d88a70 83%,
#fb5a22 100%
);
border-radius: 50%;
z-index: 111;
}
.box1_bar_foot1 {
position: absolute;
bottom: -4px;
width: 100%;
height: 8px;
background: linear-gradient(
90deg,
#0e6090 0%,
#3bace6 30%,
#093b79 83%,
#356bad 100%
);
border-radius: 50%;
z-index: 111;
}
}
}
.box1_main_item p {
width: 39px;
height: 15px;
font-size: 13px;
text-align: center;
font-weight: bold;
color: #5f9fba;
line-height: 18px;
}
}
.box1_list {
width: 90%;
height: 40px;
margin-left: 5%;
color: #5996b1;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.box1_list_item {
height: 17px;
display: flex;
align-items: center;
justify-content: space-between;
width: 25%;
.box1_color1 {
color: #0cbfc0;
line-height: 17px;
font-size: 16px;
}
.box1_color2 {
color: #73fd6c;
line-height: 17px;
font-size: 16px;
}
}
}
}
#Box2,
#Box5 {
width: 100%;
.ps_box2_main {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
font-family: Microsoft YaHei UI;
font-weight: 400;
.ps_box2_main_font1 {
color: #7ec7e9;
font-size: 16px;
text-align: center;
}
.ps_box2_main_font2 {
font-size: 16px;
color: #7ec7e9;
}
.ps_box2_main_item {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
.ps_box2_main_bg {
width: 250px;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
position: relative;
.ps_box2_main_mark {
position: absolute;
margin-left: -24px;
text-align: center;
width: 48px;
background: #024052;
border-radius: 2px;
}
.ps_box2_main_bg2 {
height: 100%;
background: linear-gradient(-87deg, #4cffff, #2f5fe9);
border-radius: 2px;
}
}
}
}
}
#Box3,
#Box6 {
width: 100%;
.box3_main {
margin-top: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
.box3_main_foot {
margin-left: 60%;
width: 135px;
height: 14px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: #447c94;
}
.box3_main_item {
width: 100%;
height: 55px;
margin-top: 1%;
display: flex;
align-items: center;
justify-content: space-around;
background: linear-gradient(
99deg,
rgba(0, 54, 77, 1) 0%,
#00364d 52%,
rgba(0, 54, 77, 0.6) 100%
);
opacity: 0.8;
.box3_main_item_font1 {
width: 80px;
height: 13px;
font-size: 13px;
font-weight: bold;
font-family: Alibaba PuHuiTi;
color: #76bbdb;
}
.box3_main_item_font2 {
width: 76px;
height: 15px;
font-size: 18px;
font-family: DIN;
font-weight: bold;
color: #0cc2bd;
}
.box3_main_item_font3 {
width: 19px;
height: 13px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: #447c94;
}
.box3_main_item_font4 {
width: 34px;
height: 14px;
font-size: 18px;
font-family: DIN;
font-weight: bold;
color: #74ff6d;
}
.box3_main_item_font5 {
width: 49px;
height: 14px;
font-size: 18px;
font-family: DIN;
font-weight: bold;
color: #f05521;
}
.box3_main_item_font6 {
width: 34px;
height: 14px;
font-size: 18px;
font-family: DIN;
font-weight: bold;
color: #e47f25;
}
}
}
}
#CenterBox {
color: rgb(255, 255, 255);
position: absolute;
height: 200px;
width: 45%;
bottom: 50px;
left: 27.5%;
#CenterBox_left {
position: absolute;
left: -20px;
bottom: -20px;
width: 50px;
height: 282px;
background: url("/src/assets/imgs/zh_center_left.png") no-repeat center;
background-size: 100% 100%;
}
#CenterBox_right {
position: absolute;
right: -20px;
bottom: -20px;
width: 50px;
height: 282px;
background: url("/src/assets/imgs/zh_center_right.png") no-repeat center;
background-size: 100% 100%;
}
.CenterRound_zh {
width: 27%;
height: 100%;
background: url("/src/assets/imgs/zh_bg.png") no-repeat center;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: -20px;
left: 35.5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.CenterRound_ps {
width: 27%;
height: 100%;
background: url("/src/assets/imgs/zh_bg2.png") no-repeat center;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: -20px;
left: 35.5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.CenterRound_pl {
width: 27%;
height: 100%;
background: url("/src/assets/imgs/zh_bg3.png") no-repeat center;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: -20px;
left: 35.5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.CenterRound_bs {
width: 27%;
height: 100%;
background: url("/src/assets/imgs/zh_bg4.png") no-repeat center;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: -20px;
left: 35.5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.CenterRound_box {
position: absolute;
width: 180px;
height: 60px;
background: linear-gradient(
0deg,
rgba(8, 44, 77, 0.4) 0%,
rgba(8, 44, 77, 0.6) 100%
);
bottom: -10px;
left: calc(50% - 85px);
display: flex;
justify-content: space-around;
align-items: center;
background: url("/src/assets/imgs/zh_center_bg.png") no-repeat center;
.CenterRound_box_item {
text-align: center;
}
}
.CenterRound_main {
margin-left: 5px;
width: 50%;
height: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-weight: bold;
}
.CenterRound_main_font1 {
line-height: 30px;
font-size: 36px;
font-family: Arial;
color: #48cde2;
}
.CenterRound_main_font2 {
font-size: 16px;
font-family: DIN;
color: #52e9ff;
line-height: 14px;
}
.CenterRound_main_font3 {
line-height: 30px;
font-size: 36px;
font-family: Arial;
color: #d74d3a;
}
.CenterRound_main_font4 {
font-size: 16px;
font-family: DIN;
color: #d74d3a;
line-height: 14px;
}
.CenterRound_main_font5 {
line-height: 30px;
font-size: 36px;
font-family: Arial;
color: #417fed;
}
.CenterRound_main_font6 {
font-size: 16px;
font-family: DIN;
color: #417fed;
line-height: 14px;
}
.CenterRound_main_font7 {
line-height: 30px;
font-size: 36px;
font-family: Arial;
color: #00f9df;
}
.CenterRound_main_font8 {
font-size: 16px;
font-family: DIN;
color: #00f9df;
line-height: 14px;
}
#CenterBox1 {
position: absolute;
left: 0;
top: 0;
width: 43%;
height: 164px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: linear-gradient(
269deg,
rgba(12, 191, 192, 0.4) 0%,
rgba(12, 191, 192, 0.1) 100%
);
}
#CenterBox2 {
position: absolute;
right: 0;
top: 0;
width: 43%;
height: 164px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: linear-gradient(
88deg,
rgba(12, 191, 192, 0.4) 0%,
rgba(12, 191, 192, 0.1) 100%
);
}
.centerbox_item {
display: flex;
justify-content: space-around;
align-items: center;
width: 80%;
// border: 1px solid red;
.centerbox_item_font {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
font-style: italic;
color: #52e9ff;
width: 100px;
text-align: center;
}
.centerbox_item_font2 {
width: 48px;
height: 14px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
.centerbox_item_value {
font-size: 24px;
font-weight: 400;
color: #0ccafc;
width: 50%;
text-align: center;
}
}
}
#Foot {
position: absolute;
width: 100%;
bottom: 0;
left: 0%;
height: 30px;
background: url("/src/assets/imgs/zh_foot.png") no-repeat center;
background-size: 100% 100%;
}
#LeftButton {
position: absolute;
cursor: pointer;
width: 20px;
height: 20px;
top: 10px;
left: 465px;
line-height: 20px;
text-align: center;
font-size: 20px;
color: #0ccafc;
border: 1px solid #1ddcff;
background: linear-gradient(
84deg,
rgba(0, 54, 77, 0) 0%,
rgba(14, 87, 89, 0.6) 100%
);
}
#Title {
position: absolute;
cursor: pointer;
width: 26%;
height: 50px;
top: 10px;
left: 37%;
display: flex;
align-items: center;
justify-content: space-around;
font-family: PangMenZhengDao;
font-size: 20px;
z-index: 0;
}
#leftBox {
position: absolute;
color: white;
top: 0;
left: 12px;
height: 100%;
width: 455px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#rightBox {
position: absolute;
color: white;
top: 0;
right: 12px;
height: 100%;
width: 455px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.Button1 {
animation: Button1 0.6s linear;
}
.Button2 {
animation: Button2 0.6s linear;
}
.bottomBox1 {
animation: bottomBox1 0.6s linear;
}
.bottomBox2 {
animation: bottomBox2 0.6s linear;
}
.rightBox1 {
animation: rightBox1 0.6s linear;
}
.rightBox2 {
animation: rightBox2 0.6s linear;
}
.leftBox1 {
animation: leftBox1 0.6s linear;
}
.leftBox2 {
animation: leftBox2 0.6s linear;
}
// 按钮
@keyframes bottomBox1 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes bottomBox2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes rightBox1 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes rightBox2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes leftBox1 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes leftBox2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes Button1 {
0% {
left: 465px;
}
100% {
left: 10px;
}
}
@keyframes Button2 {
0% {
left: 10px;
}
100% {
left: 465px;
}
}
.W_LeftBox {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: rgb(238, 238, 238);
.Left1Tree {
width: 200px;
// height: calc(60% - 30px);
height: calc(100% - 30px);
overflow: auto;
box-sizing: border-box;
box-shadow: 0px 1px 5px #ccc;
padding: 5px;
}
.Left2Tree {
width: 200px;
height: calc(40% - 40px);
overflow: auto;
margin-top: 10px;
}
.LeftTreeTitle {
display: inline-block;
width: 100%;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: 600;
color: rgb(21, 168, 212);
}
}
.dark_W_LeftBox {
background: #0e3747;
}
.OneTreeBox {
width: 100%;
height: auto;
margin-bottom: 5px;
.OneTree {
background: rgb(201, 201, 201);
width: 100%;
min-height: 40px;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
border: 1px solid rgb(13, 134, 134);
}
::v-deep(.n-collapse-item__header) {
background: rgb(201, 201, 201);
width: 100%;
height: auto;
min-height: 40px;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
border: 1px solid rgb(13, 134, 134);
padding-left: 20px !important;
}
::v-deep(.n-collapse-item__content-inner) {
padding-top: 3px !important;
}
.TwoTree {
width: 100%;
height: 36px;
line-height: 36px;
background: #d7d7d7;
padding-left: 35px;
}
.TwoTree:nth-child(odd) {
background: #e3e3e3;
}
}
.dark_OneTreeBox {
width: 100%;
height: auto;
margin-bottom: 5px;
.OneTree {
background: #00475c;
width: 100%;
min-height: 40px;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
// border: 1px solid aqua;
}
::v-deep(.n-collapse-item__header) {
background: #00475c;
width: 100%;
height: auto;
min-height: 40px;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
// border: 1px solid aqua;
padding-left: 20px !important;
}
::v-deep(.n-collapse-item__content-inner) {
padding-top: 3px !important;
}
.TwoTree {
width: 100%;
height: 36px;
line-height: 36px;
background: #0e3747;
padding-left: 35px;
}
.TwoTree:nth-child(odd) {
background: rgba(2, 59, 83, 1);
}
}
#TuLiBox {
position: absolute;
left: 0px;
top: 0px;
color: white;
z-index: 1111;
cursor: pointer;
}
/* 设置持续时间和动画函数 */
.fade1-enter-active {
animation: test1 0.6s linear;
}
.fade1-leave-active {
animation: test1 0.6s linear reverse;
}
// 左边
@keyframes test1 {
0% {
top: -100%;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
</style>
