<template>
<div id="wuranyuandaping">
<div class="header">
<screen-menu onMenu="wuRanYuanPing"></screen-menu>
<screen-menu-title onMenu="wuRanYuanPing"></screen-menu-title>
</div>
<div class="zmui-left" style="display: none;">
<div class="zmui-l-con">
<div class="zmui-l-top">
<div class="zmui-l-t-left">
<div class="zmui-l-title">
<div class="zmui-g-title">
<div class="zmui-g-title-name">现有污水处理厂情况</div>
</div>
</div>
<div class="zmui-g-con" style="height: 770px;">
<div class="zmui-l-l-top">
<div class="zmui-l-l-t-left">
<div class="zmui-g-box zmui-box-ll-left">
<div class="zmui-l-l-t-tabs">
<div
class="zmui-l-l-t-tabs-li"
@click="changType(index)"
:class="{
'zmui-l-l-t-tabs-li-on': index === typeId,
'zmui-l-l-t-tabs-li-select': index === 3
}"
v-for="(item, index) in typeData"
:key="index"
>
<div class="zmui-select-dt" v-if="index === 3">
<el-select
v-model="echartsId"
@change="changEcharts"
class="zmui-screen-choose-title"
popper-class="mySelectPopper"
:placeholder="item"
style="width: 260px;"
>
<el-option
v-for="(sitem, sindex) in echartsData[index]"
:key="sindex"
:label="sitem.name"
:value="sindex"
>
</el-option>
</el-select>
</div>
<div class="zmui-select-dd" v-else>{{ item }}</div>
</div>
</div>
<div
class="zmui-l-l-t-l-info"
:style="typeId === 3 ? 'margin-left: 150px' : ''"
>
<div class="zmui-l-l-t-l-i-echarts">
<div class="zmui-echarts">
<div class="zmui-echartsOne" id="echartsOne"></div>
</div>
<div class="zmui-l-l-t-l-i-dl">
<div class="zmui-l-l-t-l-i-dd">
一级A <span>40</span> 座
</div>
<div class="zmui-l-l-t-l-i-dd">
京标B <span>33</span> 座
</div>
</div>
</div>
<div class="zmui-l-l-t-l-i-ul" v-if="typeId !== 3">
<div
class="zmui-l-l-t-l-i-li"
style="cursor: pointer;"
@click="changChang"
v-for="(item, index) in echartsData[typeId]"
:key="index"
>
<div class="zmui-l-l-t-l-i-top">
<div class="zmui-l-l-t-l-i-icon"></div>
<div class="zmui-l-l-t-l-i-name">
{{ item.name }}
</div>
</div>
<div class="zmui-l-l-t-l-i-bot">{{ item.value }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="zmui-l-l-t-right">
<div class="zmui-g-box zmui-box-ll-right">
<div class="zmui-l-l-ul">
<div class="zmui-l-l-li zmui-l-l-li-on">
<div class="zmui-l-l-li-name">设计处理能力</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ typeId ? "463" : "363" }}
</div>
<div class="zmui-l-l-li-unit">万吨/日</div>
</div>
</div>
<div class="zmui-l-l-li">
<div class="zmui-l-l-li-name">实际处理能力</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ typeId ? "123" : "344" }}
</div>
<div class="zmui-l-l-li-unit">万吨/日</div>
</div>
</div>
<div class="zmui-l-l-li">
<div class="zmui-l-l-li-name">COD</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ changId ? "123232" : "133632" }}
</div>
<div class="zmui-l-l-li-unit">吨/年</div>
</div>
</div>
<div class="zmui-l-l-li">
<div class="zmui-l-l-li-name">NH3N</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ changId ? "133235" : "123265" }}
</div>
<div class="zmui-l-l-li-unit">吨/年</div>
</div>
</div>
<div class="zmui-l-l-li">
<div class="zmui-l-l-li-name">TP</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ changId ? "121232" : "123532" }}
</div>
<div class="zmui-l-l-li-unit">吨/年</div>
</div>
</div>
<div class="zmui-l-l-li">
<div class="zmui-l-l-li-name">TN</div>
<div class="zmui-l-l-li-num">
<div class="zmui-l-l-li-number">
{{ changId ? "123732" : "123532" }}
</div>
<div class="zmui-l-l-li-unit">吨/年</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="zmui-l-t-right zmui-g-mar-left">
<div class="zmui-g-box zmui-box-lr-top">
<div class="zmui-g-title">
<div class="zmui-g-title-name">十四五规划</div>
<div class="zmui-g-title-more">
<div class="zmui-g-title-mli">
<el-date-picker
v-model="yearDuan"
style="width: 180px;fontSize:32px;textAlign:center;"
class="zmui-screen-picker"
format="yyyy"
value-format="yyyy"
popper-class="myDatePopper"
:clearable="false"
type="year"
placeholder="所有年份"
></el-date-picker>
</div>
<div class="zmui-g-title-mli">
<el-select
v-model="jinchuId"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="请选择"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in jinchuList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
</div>
<div class="zmui-g-con" style="height: 770px;">
<div class="zmui-g-box zmui-box-ll-left">
<div class="zmui-l-l-t-tabs">
<div
class="zmui-l-l-t-tabs-li"
@click="changPlanType(index)"
:class="{
'zmui-l-l-t-tabs-li-on': index === typePlanId,
'zmui-l-l-t-tabs-li-select': index === 3
}"
v-for="(item, index) in typePlanData"
:key="index"
>
<div class="zmui-select-dt" v-if="index === 3">
<el-select
v-model="echartsPlanId"
@change="changPlanEcharts"
class="zmui-screen-choose-title"
popper-class="mySelectPopper"
:placeholder="item"
style="width: 260px;"
>
<el-option
v-for="(sitem, sindex) in echartsPlanData[index]"
:key="sindex"
:label="sitem.name"
:value="sindex"
>
</el-option>
</el-select>
</div>
<div class="zmui-select-dd" v-else>{{ item }}</div>
</div>
</div>
<div
class="zmui-l-l-t-l-info"
:style="typePlanId === 3 ? 'margin-left: 150px' : ''"
>
<div class="zmui-l-l-t-l-i-echarts">
<div class="zmui-echarts">
<div class="zmui-echartsOne" id="echartsFive"></div>
</div>
<div class="zmui-l-l-t-l-i-dl">
<div class="zmui-l-l-t-l-i-dd">
一级A <span>28</span> 座
</div>
<div class="zmui-l-l-t-l-i-dd">
京标B <span>13</span> 座
</div>
</div>
</div>
<div class="zmui-l-l-t-l-i-ul" v-if="typePlanId !== 3">
<div
class="zmui-l-l-t-l-i-li"
v-for="(item, index) in echartsPlanData[typePlanId]"
:key="index"
>
<div class="zmui-l-l-t-l-i-top">
<div class="zmui-l-l-t-l-i-icon"></div>
<div class="zmui-l-l-t-l-i-name">{{ item.name }}</div>
</div>
<div class="zmui-l-l-t-l-i-bot">{{ item.value }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="zmui-g-con zmui-echarts" style="padding-top: 50px; height: 770px;">
<div class="zmui-echartsFive" id="echartsFive"></div>
</div> -->
</div>
</div>
</div>
<div class="zmui-l-bot zmui-g-mar-top">
<div class="zmui-l-b-left">
<div class="zmui-g-box zmui-box-ll-bot">
<div class="zmui-g-title">
<div class="zmui-g-title-name">污水处理厂</div>
</div>
<div class="zmui-g-con zmui-l-l-b-con" style="height: 470px;">
<div class="zmui-l-l-b-left">
<div class="zmui-echarts">
<div class="zmui-echartsSix" id="echartsSix"></div>
</div>
</div>
<div class="zmui-l-l-b-right">
<div class="zmui-echarts">
<div class="zmui-echartsSeven" id="echartsSeven"></div>
</div>
</div>
</div>
</div>
</div>
<div class="zmui-l-b-right zmui-g-mar-left">
<div class="zmui-g-box zmui-box-lr-bot">
<div class="zmui-g-title">
<div class="zmui-g-title-name">年排放量</div>
</div>
<div class="zmui-g-con zmui-echarts" style="height: 470px;">
<div class="zmui-echartsFour" id="echartsFour"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="zmui-left wry_left_box " style="">
<div class="left_wrapper">
<div>
<div class="wrapper_title">
<div data-v-eeee1668="" class="zmui-g-title-name">
现有污水处理厂情况
</div>
<div class="zmui-g-title-more">
<div data-v-eeee1668="" class="zmui-g-title-mli">
<div
data-v-eeee1668=""
class="el-select zmui-screen-select-title"
style="width: 169px; height: 36px !important;"
>
<div class="el-input el-input--suffix">
<input
type="text"
readonly="readonly"
autocomplete="off"
placeholder="城区"
class="el-input__inner"
/><span class="el-input__suffix"
><span class="el-input__suffix-inner"
><i
class="el-select__caret el-input__icon el-icon-arrow-up"
></i
><!----><!----><!----><!----><!----></span
><!----></span
><!----><!---->
</div>
<div
class="el-select-dropdown el-popper mySelectPopper"
style="display: none; min-width: 168.984px;"
>
<div class="el-scrollbar" style="">
<div
class="el-select-dropdown__wrap el-scrollbar__wrap"
style="margin-bottom: -3px; margin-right: -3px;"
>
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>主城市</span>
</li>
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>外县</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div
class="el-scrollbar__thumb"
style="transform: translateX(0%);"
></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div
class="el-scrollbar__thumb"
style="transform: translateY(0%);"
></div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div data-v-eeee1668="" class="zmui-g-title-mli">
<div
data-v-eeee1668=""
class="el-select zmui-screen-select-title"
style="width: 169px; height: 36px !important;"
>
<!---->
<div class="el-input el-input--suffix">
<!----><input
type="text"
readonly="readonly"
autocomplete="off"
placeholder="运营主体"
class="el-input__inner"
/><!----><span class="el-input__suffix"
><span class="el-input__suffix-inner"
><i
class="el-select__caret el-input__icon el-icon-arrow-up"
></i
><!----><!----><!----><!----><!----></span
><!----></span
><!----><!---->
</div>
<div
class="el-select-dropdown el-popper mySelectPopper"
style="display: none; min-width: 168.984px;"
>
<div class="el-scrollbar" style="">
<div
class="el-select-dropdown__wrap el-scrollbar__wrap"
style="margin-bottom: -3px; margin-right: -3px;"
>
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>水务集团</span>
</li>
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>城开集团</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div
class="el-scrollbar__thumb"
style="transform: translateX(0%);"
></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div
class="el-scrollbar__thumb"
style="transform: translateY(0%);"
></div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div data-v-eeee1668="" class="zmui-g-title-mli">
<div
data-v-eeee1668=""
class="el-select zmui-screen-select-title"
style="width: 169px; height: 36px !important;"
>
<!---->
<div class="el-input el-input--suffix">
<!----><input
type="text"
readonly="readonly"
autocomplete="off"
placeholder="执行标准"
class="el-input__inner"
/><!----><span class="el-input__suffix"
><span class="el-input__suffix-inner"
><i
class="el-select__caret el-input__icon el-icon-arrow-up"
></i
><!----><!----><!----><!----><!----></span
><!----></span
><!----><!---->
</div>
<div
class="el-select-dropdown el-popper mySelectPopper"
style="display: none; min-width: 168.984px;"
>
<div class="el-scrollbar" style="">
<div
class="el-select-dropdown__wrap el-scrollbar__wrap"
style="margin-bottom: -3px; margin-right: -3px;"
>
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>一级A</span>
</li>
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>京标B</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div
class="el-scrollbar__thumb"
style="transform: translateX(0%);"
></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div
class="el-scrollbar__thumb"
style="transform: translateY(0%);"
></div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div data-v-eeee1668="" class="zmui-g-title-mli">
<div
data-v-eeee1668=""
class="el-select zmui-screen-select-title"
style="width: 169px; height: 36px !important;"
>
<!---->
<div class="el-input el-input--suffix">
<!----><input
type="text"
readonly="readonly"
autocomplete="off"
placeholder="处理类型"
class="el-input__inner"
/><!----><span class="el-input__suffix"
><span class="el-input__suffix-inner"
><i
class="el-select__caret el-input__icon el-icon-arrow-up"
></i
><!----><!----><!----><!----><!----></span
><!----></span
><!----><!---->
</div>
<div
class="el-select-dropdown el-popper mySelectPopper"
style="display: none; min-width: 168.984px;"
>
<div class="el-scrollbar" style="">
<div
class="el-select-dropdown__wrap el-scrollbar__wrap"
style="margin-bottom: -3px; margin-right: -3px;"
>
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>工业</span>
</li>
<li
data-v-eeee1668=""
class="el-select-dropdown__item"
>
<span>生活</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div
class="el-scrollbar__thumb"
style="transform: translateX(0%);"
></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div
class="el-scrollbar__thumb"
style="transform: translateY(0%);"
></div>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="content_box">
<div class="echarts_box" id="echartsOne"></div>
<div class="des_box">
<div class="item_box">
<div>
<p class="item_des">数量</p>
<p class="item_num">46323家</p>
</div>
<div>
<p class="item_des">数量</p>
<p class="item_num">46323家</p>
</div>
</div>
<div class="item_box">
<div>
<p class="item_des">数量</p>
<p class="item_num">46323家</p>
</div>
<div>
<p class="item_des">数量</p>
<p class="item_num">46323家</p>
</div>
</div>
<div class="item_footer_box">
<p class="item_des">数量</p>
<p class="item_num">46323家</p>
</div>
</div>
</div>
</div>
<div></div>
</div>
<div class="right_wrapper">
<div class="header_box">
<div class="wrapper_title">
<div data-v-eeee1668="" class="zmui-g-title-name">
污水处理厂
</div>
</div>
<div class="content_box">
<div class="zmui-g-con zmui-l-l-b-con" style="height: 470px;">
<div class="zmui-l-l-b-left">
<div class="zmui-echarts">
<div class="zmui-echartsSix" id="echartsSix"></div>
</div>
</div>
<div class="zmui-l-l-b-right">
<div class="zmui-echarts">
<div class="zmui-echartsSeven" id="echartsSeven"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer_box">
<div class="wrapper_title">
<div data-v-eeee1668="" class="zmui-g-title-name">
现有污水处理厂情况
</div>
</div>
<div class="content_box"></div>
</div>
</div>
</div>
<div class="zmui-right">
<div class="zmui-r-left">
<div class="zmui-r-l-top">
<div class="zmui-g-box zmui-box-rl-top">
<div class="zmui-g-title">
<div class="zmui-g-title-name">污水处理厂情况</div>
<div class="zmui-g-title-more">
<div class="zmui-g-title-mli">
<el-select
v-model="chengquId"
@change="changchengqu"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="城区"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in chengquList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="zmui-g-title-mli">
<el-select
v-model="yunyingId"
@change="changyunying"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="运营主体"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in yunyingList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="zmui-g-title-mli">
<el-select
v-model="zhixingId"
@change="changzhixing"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="执行标准"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in zhixingList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="zmui-g-title-mli">
<el-select
v-model="leixingId"
@change="changleixing"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="处理类型"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in leixingList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
</div>
<div class="zmui-g-con">
<el-table
:data="dataPollute"
@row-click="clickTr"
class="zmui-screen-table"
height="600"
ref="table"
>
<el-table-column type="index" label="序号" width="70">
<template slot-scope="scope">
<span class="tableIndex">{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="名称"
width="240"
></el-table-column>
<el-table-column
prop="num1"
align="left"
label="设计规模（万立方米/日）"
width="280"
>
</el-table-column>
<el-table-column
prop="num2"
align="left"
label="实际处理水量（万立方米/日）"
width="330"
>
</el-table-column>
<el-table-column
prop="type"
label="处理标准"
width="110"
></el-table-column>
<el-table-column
prop="river"
label="尾水排放河道"
width="170"
></el-table-column>
<el-table-column
prop="class"
label="处理类型"
width="110"
></el-table-column>
<el-table-column
prop="detail"
label="备注"
width="180"
></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="zmui-r-l-bot zmui-g-mar-top">
<div class="zmui-r-l-b-left">
<div class="zmui-g-box zmui-box-rl-left">
<div class="zmui-g-title">
<div class="zmui-g-title-name">视频</div>
</div>
<div
class="zmui-g-con"
style="padding: 40px 0 0 20px; height: 630px;"
>
<img
width="714"
height="547"
src="../assets/images/wuRanYuanPing/ads/wushuichang.png"
/>
</div>
</div>
</div>
<div class="zmui-r-l-b-right">
<div class="zmui-g-box zmui-box-rl-right">
<div class="zmui-g-title">
<div class="zmui-g-title-name">富锋污水厂</div>
<div class="zmui-g-title-more">
<div class="zmui-g-title-mli">
<el-select
v-model="zhibiaoId"
class="zmui-screen-select-title"
popper-class="mySelectPopper"
placeholder="按指标"
style="width: 169px;height: 36px!important;"
>
<el-option
v-for="item in zhibiaoList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="zmui-g-title-mli">
<el-date-picker
v-model="timeDuan"
style="width: 140px;fontSize:32px;textAlign:center;"
class="zmui-screen-picker"
format="yyyy-MM"
value-format="yyyy-MM"
popper-class="myDatePopper"
:clearable="false"
type="month"
placeholder="时段"
></el-date-picker>
</div>
</div>
</div>
<div class="zmui-g-con zmui-echarts" style="height: 630px;">
<div class="zmui-echartsThree" id="echartsThree"></div>
</div>
<!-- <div style="padding: 30px 0 0 30px;">
<img src="../assets/images/wuRanYuanPing/ads/right1.png" />
</div> -->
</div>
</div>
</div>
</div>
<div class="zmui-r-right zmui-g-mar-left">
<div class="zmui-g-box zmui-box-rr-all">
<div class="zmui-g-title">
<div class="zmui-g-title-name">问题企业/在线监测企业</div>
</div>
<div class="zmui-g-con zmui-r-table" style="height: 1340px;">
<div class="zmui-r-thead">
<div class="zmui-r-td-one">序号</div>
<div class="zmui-r-td-two">区域</div>
<div class="zmui-r-td-three">企业名称</div>
<div class="zmui-r-td-four">
<p>排放量</p>
<p>(吨/年)</p>
</div>
<div class="zmui-r-td-five">操作</div>
</div>
<div class="zmui-r-ul">
<div
class="zmui-r-li"
v-for="(item, index) in rightData"
:key="index"
>
<div class="zmui-r-td-one">{{ index + 1 }}</div>
<div class="zmui-r-td-two">{{ item.region }}</div>
<div class="zmui-r-td-three">{{ item.pollute }}</div>
<div class="zmui-r-td-four">{{ item.num }}</div>
<div class="zmui-r-td-five">
<div class="zmui-r-button">在线监测</div>
<div class="zmui-r-icon">
<img
class="zmui-r-img"
src="../assets/images/wuRanYuanPing/m-sxt.png"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 地图 -->
<div class="centerBox" id="liuyuping">
<!-- <arcgis-map @loadmapcall="loadMapCall" height="1320"></arcgis-map>
<div class="mapSelectBox">
<div>
<el-select
v-model="count"
class="mySelect"
popper-class="mySelectPopper"
placeholder="请选择"
style="width: 236px;"
>
<el-option label="监测频次" value="1"></el-option>
</el-select>
</div>
<div>
<el-date-picker
v-model="time"
style="width: 140px;fontSize:32px;textAlign:center;"
class="myDate"
format="yyyy-MM"
value-format="yyyy-MM"
popper-class="myDatePopper"
:clearable="false"
type="month"
placeholder="选择月"
></el-date-picker>
</div>
</div> -->
</div>
<div class="pollutionTraceabilityBox" v-if="show">
<div class="pollutionTraceability">
<div class="poll_header">污水处理厂</div>
<div>
<el-table
:data="popupData"
class="zmui-screen-table"
style="width: 2652px;"
height="800"
ref="table"
>
<el-table-column type="index" label="序号" width="70">
<template slot-scope="scope">
<span class="tableIndex">{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="name1" label="县市区"></el-table-column>
<el-table-column
prop="name2"
label="污水处理厂名称"
></el-table-column>
<el-table-column prop="name3" label="国考断面"></el-table-column>
<el-table-column prop="name4" label="类型"></el-table-column>
<el-table-column
prop="name5"
label="设计处理能力"
></el-table-column>
<el-table-column prop="name6" label="实际处理量"></el-table-column>
<el-table-column prop="name7" label="排放标准"></el-table-column>
<el-table-column
prop="name8"
label="所排河流名称"
></el-table-column>
<el-table-column
prop="name9"
label="2021上半年污泥总量（吨）"
></el-table-column>
<el-table-column prop="name10" label="污泥去向"></el-table-column>
</el-table>
</div>
<img
@click="show = false"
class="poll_close"
src="../assets/images/liuyuping/close.png"
/>
</div>
</div>
</div>
</template>
<script>
import utils from "../assets/js/utils.js";
import url from "../assets/js/interface.js";
import arcgisMap from "../components/screenMap";
import screenMenu from "../components/screenMenu.vue";
import screenMenuTitle from "../components/screenMenuTitle.vue";
import mapApi from "../components/mapJS/mapApi.js";
import params from "../assets/js/params";
import baseParams from "../../../static/params.js";
import * as echarts from "echarts";
var timer;
export default {
name: "jiangbeisite",
data() {
return {
show: false,
changId: true,
typeId: 0,
echartsId: "",
typePlanId: 0,
echartsPlanId: "",
time: "2021-08",
count: "1",
jinchuList: [
{
label: "主城区",
value: "主城区"
},
{
label: "外县",
value: "外县"
}
],
jinchuId: "主城区",
chengquList: [
{
label: "主城市",
value: "主城市"
},
{
label: "外县",
value: "外县"
}
],
chengquId: "",
yunyingList: [
{
label: "水务集团",
value: "水务集团"
},
{
label: "城开集团",
value: "城开集团"
}
],
yunyingId: "",
zhixingList: [
{
label: "一级A",
value: "一级A"
},
{
label: "京标B",
value: "京标B"
}
],
zhixingId: "",
leixingList: [
{
label: "工业",
value: "工业"
},
{
label: "生活",
value: "生活"
}
],
leixingId: "",
zhibiaoList: [
{
label: "总磷",
value: "总磷"
},
{
label: "氨氮",
value: "氨氮"
}
],
zhibiaoId: "总磷",
yearDuan: "",
timeDuan: "",
typeData: ["按流域", "按控制单元", "按区县", "按责任主体"],
typePlanData: ["按流域", "按控制单元", "按区县", "按责任主体"],
echartsData: [
[
{
name: "饮马河",
value: 15
},
{
name: "雾开河",
value: 25
},
{
name: "松花江",
value: 10
},
{
name: "沐石河",
value: 23
}
],
[
{
name: "受控单元1",
value: 17
},
{
name: "受控单元2",
value: 23
},
{
name: "受控单元3",
value: 13
},
{
name: "受控单元4",
value: 20
}
],
[
{
name: "南关区",
value: 18
},
{
name: "德惠市",
value: 22
},
{
name: "朝阳区",
value: 15
},
{
name: "绿园区",
value: 18
}
],
[
{
name: "责任主体1",
value: 15
},
{
name: "责任主体2",
value: 25
},
{
name: "责任主体3",
value: 20
},
{
name: "责任主体4",
value: 13
}
]
],
echartsPlanData: [
[
{
name: "饮马河",
value: 15
},
{
name: "雾开河",
value: 15
},
{
name: "松花江",
value: 10
},
{
name: "沐石河",
value: 1
}
],
[
{
name: "受控单元1",
value: 17
},
{
name: "受控单元2",
value: 13
},
{
name: "受控单元3",
value: 8
},
{
name: "受控单元4",
value: 3
}
],
[
{
name: "南关区",
value: 18
},
{
name: "德惠市",
value: 21
},
{
name: "朝阳区",
value: 1
},
{
name: "绿园区",
value: 1
}
],
[
{
name: "责任主体1",
value: 11
},
{
name: "责任主体2",
value: 14
},
{
name: "责任主体3",
value: 10
},
{
name: "责任主体4",
value: 6
}
]
],
rightDataBei: [],
popupChao: [
{
name1: "南关",
name2: "东南污水处理厂",
name3: "杨家崴子",
name4: "城镇",
name5: "15",
name6: "12.83",
name7: "北京地标B",
name8: "伊通河",
name9: "16920.92",
name10: "吉林省鹏鹞生物科技有限公司"
},
{
name1: "宽城",
name2: "北郊污水处理厂",
name3: "杨家崴子",
name4: "城镇",
name5: "78",
name6: "70.17",
name7: "一级A",
name8: "伊通河",
name9: "81126.56",
name10: "吉林省鹏鹞生物科技有限公司"
},
{
name1: "汽开",
name2: "西部污水处理厂",
name3: "山嘴子",
name4: "城镇",
name5: "10",
name6: "11.2",
name7: "一级A",
name8: "新凯河",
name9: "22482.3",
name10: "吉林省鹏鹞生物科技有限公司"
},
{
name1: "新区",
name2: "南部污水处理厂",
name3: "山嘴子",
name4: "城镇",
name5: "15",
name6: "14.99",
name7: "一级A",
name8: "永春河",
name9: "26589.08",
name10: "吉林省鹏鹞生物科技有限公司"
},
{
name1: "二道",
name2: "长春英俊污水处理厂",
name3: "十三家子",
name4: "城镇",
name5: "2.04",
name6: "2",
name7: "一级A",
name8: "雾开河",
name9: "2856.9",
name10: "吉林省鹏鹞生物科技有限公司"
},
{
name1: "宽城",
name2: "串湖污水处理厂",
name3: "杨家崴子",
name4: "城镇",
name5: "20",
name6: "16.54",
name7: "一级A",
name8: "串湖-伊通河",
name9: "17945.08",
name10: "华能吉林发电有限公司长春热电厂"
}
],
popupDi: [
{
name1: "朝阳",
name2: "乐山污水处理厂",
name3: "新立城大坝",
name4: "乡镇",
name5: "1",
name6: "0.16",
name7: "北京地标B",
name8: "永春河",
name9: "0",
name10: ""
},
{
name1: "绿园",
name2: "合心污水处理厂",
name3: "靠山大桥",
name4: "工业",
name5: "2.5",
name6: "0.85",
name7: "一级A",
name8: "新凯河",
name9: "145.5",
name10: "吉林瑞祥节能环保有限公司"
},
{
name1: "绿园",
name2: "西新污水处理厂",
name3: "山嘴子",
name4: "工业",
name5: "2.5",
name6: "0.58",
name7: "一级A",
name8: "双龙河-新凯河",
name9: "1984.14",
name10: "吉林省新农科生态农业科技有限公司"
},
{
name1: "德惠",
name2: "朱城子镇污水处理厂",
name3: "十三家子",
name4: "工业",
name5: "1",
name6: "0.22",
name7: "一级A",
name8: "雾开河",
name9: "14.28",
name10: "吉林中沃生物科技有限公司"
},
{
name1: "九台",
name2: "卡伦污水处理厂",
name3: "十三家子",
name4: "工业",
name5: "2.5",
name6: "0.9",
name7: "一级A",
name8: "雾开河",
name9: "1222.59",
name10: "吉林省新农科生态农业科技有限公司"
}
],
popupData: [],
rightData: [
{
region: "公主岭市",
pollute: "北十条污水处理厂",
num: "19225",
id: 0
},
{
region: "公主岭市",
pollute: "龙嘉街道污水处理站",
num: "18545",
id: 1
},
{
region: "公主岭市",
pollute: "动植物园污水处理厂",
num: "15993",
id: 2
},
{
region: "公主岭市",
pollute: "榆树市富田污水处理管理有限公司",
num: "15894",
id: 3
},
{
region: "公主岭市",
pollute: "前岗乡污水处理站",
num: "14534",
id: 4
},
{
region: "公主岭市",
pollute: "山河污水处理厂",
num: "13523",
id: 5
},
{
region: "公主岭市",
pollute: "德惠市东风污水处理有限公司",
num: "9325",
id: 6
},
{
region: "公主岭市",
pollute: "长德水处理厂",
num: "8666",
id: 7
},
{
region: "公主岭市",
pollute: "朱城子镇污水处理厂",
num: "8567",
id: 8
},
{
region: "公主岭市",
pollute: "东新开河污水处理厂",
num: "8566",
id: 0
},
{
region: "公主岭市",
pollute: "卡伦污水处理厂",
num: "7567",
id: 0
},
{
region: "公主岭市",
pollute: "波泥河镇污水处理厂",
num: "6534",
id: 0
}
],
dataPolluteBei: [],
dataPollute: [
{
id: 0,
name: "富锋污水厂",
num1: "1",
num2: "0.7372",
type: "京标B",
address: "朝阳区",
river: "十四干",
longitude: "125.1411111",
latitude: "43.75666667",
class: "生活",
detail: ""
},
{
id: 1,
name: "东南污水处理厂",
num1: "15",
num2: "12.83",
type: "京标B",
river: "伊通河",
longitude: "125.3366014",
latitude: "43.79377711",
address: "南关区",
class: "工业",
detail: ""
},
{
id: 2,
name: "秦家屯镇污水处理厂",
num1: "0.1",
num2: "0.035",
type: "一级A",
address: "秦家屯镇",
longitude: "124.5825",
latitude: "43.79083333",
river: "老河-东辽河",
class: "工业",
detail: ""
},
{
id: 3,
name: "边岗乡污水处理站",
num1: "0.2",
num2: "0.015",
type: "一级A",
river: "饮马河",
address: "德惠市",
longitude: "125.6771389",
latitude: "44.64058056",
class: "工业",
detail: "2021年7月通水"
},
{
id: 4,
name: "榆树市林江污水处理厂",
num1: "4",
num2: "2.8",
type: "一级A",
address: "榆树市",
river: "松花江",
longitude: "126.1046151",
latitude: "44.77310722",
class: "生活",
detail: ""
},
{
id: 5,
name: "弓棚镇污水处理厂",
num1: "0.11",
num2: "0.04",
type: "一级A",
river: "拉林河",
address: "榆树市",
longitude: "126.3329686",
latitude: "44.98368681",
class: "工业",
detail: "正在扩建"
},
{
id: 6,
name: "靠山镇污水处理站",
num1: "0.06",
num2: "0.02",
type: "一级A",
river: "饮马河",
address: "农安县",
longitude: "125.6528379",
latitude: "44.76796041",
class: "工业",
detail: ""
},
{
id: 7,
name: "北十条污水处理厂",
num1: "3",
num2: "0",
type: "一级A",
river: "伊通河",
address: "宽城区",
longitude: "125.3274929",
latitude: "43.91527675",
class: "工业",
detail: "正在扩建"
}
]
};
},
components: {
arcgisMap,
screenMenu,
screenMenuTitle
},
created() {
document.title = "水环境会商调度系统";
},
mounted() {
this.$nextTick(()=>{
this.echartsOne();
//this.echartsTwo();
this.echartsThree();
this.echartsFour();
this.echartsFive();
this.echartsSix();
this.echartsSeven();
this.dataPolluteBei = JSON.parse(JSON.stringify(this.dataPollute));
this.rightDataBei = JSON.parse(JSON.stringify(this.rightData));
})
},
methods: {
changChang() {
this.changId = !this.changId;
},
changEcharts(val) {
this.typeId = 3;
this.echartsId = val;
this.echart1New(
this.echartsData[this.typeId][this.echartsId].value,
"echartsOne",
this.typeData[this.typeId],
["#203861", "#2cb7fb"],
"#22268a"
);
},
changPlanEcharts(val) {
this.typePlanId = 3;
this.echartsPlanId = val;
this.echart1New(
this.echartsPlanData[this.typePlanId][this.echartsPlanId].value,
"echartsFive",
this.typePlanData[this.typePlanId],
["#203861", "#2cb7fb"],
"#22268a"
);
},
clickTr(row, event, column) {
row.typeName = "污水处理厂";
let points = [
{
id: 1,
name: row.name,
x: row.longitude || 0,
y: row.latitude || 0,
symbolW: 16,
symbolH: 16,
symbolImg: "/static/images/mapImage/wryIcon/icon_sewageplant.png",
infoTemplate: mapApi.getPollutionInfoTemplate(row)
}
];
mapApi.addGraphicPoints(points, "wsclc");
mapApi.toCenter({
x: row.longitude,
y: row.latitude,
call: res => {
L.popup()
.setLatLng([row.latitude, row.longitude])
.setContent(mapApi.getPollutionInfoTemplate(row))
.openOn(baseParams.gisMap);
}
});
let newRightData = [];
if (row.id < 7) {
newRightData.push(this.rightDataBei[row.id]);
newRightData.push(this.rightDataBei[row.id + 1]);
newRightData.push(this.rightDataBei[row.id + 2]);
}
this.rightData = newRightData;
},
changchengqu() {
// this.chengquId = "";
this.yunyingId = "";
this.zhixingId = "";
this.leixingId = "";
this.dataPollute = [];
this.dataPolluteBei.map((item, index) => {
if ("主城市" === this.chengquId && index > 4) {
this.dataPollute.push(item);
} else if ("外县" === this.chengquId && index <= 4) {
this.dataPollute.push(item);
}
});
},
changzhixing() {
this.chengquId = "";
this.yunyingId = "";
// this.zhixingId = "";
this.leixingId = "";
this.dataPollute = [];
this.dataPolluteBei.map((item, index) => {
if (item.type === this.zhixingId) {
this.dataPollute.push(item);
}
});
},
changleixing() {
this.chengquId = "";
this.yunyingId = "";
this.zhixingId = "";
// this.leixingId = "";
this.dataPollute = [];
this.dataPolluteBei.map((item, index) => {
if (item.class === this.leixingId) {
this.dataPollute.push(item);
}
});
},
changyunying() {
this.chengquId = "";
// this.yunyingId = "";
this.zhixingId = "";
this.leixingId = "";
this.dataPollute = [];
this.dataPolluteBei.map((item, index) => {
if ("水务集团" === this.yunyingId && index > 5) {
this.dataPollute.push(item);
} else if ("城开集团" === this.yunyingId && index <= 5) {
this.dataPollute.push(item);
}
});
},
loadMapCall() {},
changType(index) {
this.typeId = index;
this.echartsId = "";
this.echartsOne();
},
changPlanType(index) {
this.typePlanId = index;
this.echartsPlanId = "";
this.echartsFive();
},
echart1New(getvalue, id, title, color1, color2) {
var getmax = 100;
var option = {
title: [
{
text: title,
bottom: "6%",
x: "center",
padding: [7, 14],
textStyle: {
fontWeight: "normal",
fontSize: 36,
color: "#88b1d0"
}
}
],
// tooltip: {
// trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)",
// },
angleAxis: {
show: false,
max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
type: "value",
startAngle: 225, //极坐标初始角度
splitLine: {
show: false
}
},
barMaxWidth: 30, //圆环宽度
radiusAxis: {
show: false,
type: "category"
},
//圆环位置和大小
polar: {
center: ["50%", "50%"],
radius: "180%"
},
series: [
{
type: "bar",
data: [
{
//上层圆环，显示数据
value: getvalue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: color1[0]
},
{
offset: 1,
color: color1[1]
}
])
}
}
],
barGap: "-100%", //柱间距离,上下两层圆环重合
coordinateSystem: "polar",
// roundCap: true, //顶端圆角
z: 3 //圆环层级，同zindex
},
{
//下层圆环，显示最大值
type: "bar",
data: [
{
value: getmax,
itemStyle: {
color: color2,
borderWidth: 0
}
}
],
barGap: "-100%",
coordinateSystem: "polar",
// roundCap: true,
z: 1
},
//仪表盘
{
type: "gauge",
startAngle: 225, //起始角度，同极坐标
endAngle: -45, //终止角度，同极坐标
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
// 分隔线
show: true,
length: "0%",
width: "0"
},
detail: {
formatter: function(params) {
return "{aa|" + getvalue + "}{cc|个}";
},
textStyle: {
rich: {
aa: {
fontSize: 60,
color: "#eaff51",
opacity: 1
},
cc: {
fontSize: 26,
color: "#88b1d0",
opacity: 1
}
}
},
offsetCenter: [0, 0]
},
title: {
show: false
},
data: [
{
value: getvalue
}
]
}
]
};
echarts.init(document.getElementById(id)).setOption(option);
},
echartsOne() {
this.echart1New(
73,
"echartsOne",
this.typeData[this.typeId],
["#203861", "#2cb7fb"],
"#22268a"
);
// let colorList = ['#EE4646', '#F9C725', '#0B8FFF', '#47C77D'];
// let title = this.typeData[this.typeId];
// let data = this.echartsData[this.typeId];
// let total = 0;
// this.echartsData[this.typeId].map(item => {
// total += parseFloat(item.value);
// });
// let myChart = echarts.init(document.getElementById('echartsOne'));
// myChart.clear();
// let option = {
// title: {
// text: title,
// textAlign: 'center',
// left: '30%',
// top: 'middle',
// textStyle: {
// fontSize: 29,
// color: '#B2C4E1'
// }
// },
// legend: {
// orient: 'vertical',
// left: '60%',
// top: '8%',
// itemGap: 20,
// itemWidth: 40,
// itemHeight: 30,
// textStyle: {
// padding: [20, 0, -20, 0],
// rich: {
// a: {
// color: '#B2C4E1',
// fontSize: 29,
// lineHeight: 40
// },
// b: {
// color: '#FFFFFF',
// fontSize: 34
// },
// }
// },
// formatter: function(name) {
// let target, percent;
// for (let i = 0, l = data.length; i < l; i++) {
// if (data[i].name == name) {
// target = data[i].value;
// percent = parseFloat(data[i].value / total * 100).toFixed(2);
// }
// }
// return `{a| ${name}} \n {b| ${target} (${percent}%)}`
// }
// },
// series: [{
// name: '统计',
// type: 'pie',
// center: ['30%', '50%'],
// radius: ['50%', '70%'],
// color: colorList,
// label: {
// normal: {
// show: false //隐藏引导线标识
// }
// },
// data: data
// }]
// };
// myChart.setOption(option, true);
},
echartsTwo() {
let myChart = echarts.init(document.getElementById("echartsTwo"));
myChart.clear();
let colorList = ["#0B8FFF"];
let max = 80;
let data = {
area: [
"南关区",
"德惠市",
"朝阳区",
"二道区",
"绿园区",
"宽城区",
"农安县"
],
data: [50, 30, 50, 20, 50, 30, 10]
};
let option = {
color: colorList,
grid: {
top: "5%",
left: "3%",
right: "4%",
bottom: "10%",
containLabel: true
},
xAxis: {
type: "category",
axisLabel: {
margin: 20,
color: "#797D98",
fontSize: 26
},
axisLine: {
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
},
width: 5
},
axisTick: {
show: false
},
data: data.area
},
yAxis: {
type: "value",
axisLabel: {
color: "#797D98",
fontSize: 26
},
max: max,
axisLine: {
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
},
width: 5
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [
{
name: "污水处理厂分布",
type: "bar",
barWidth: "32",
label: {
show: false,
position: "insideRight"
},
data: data.data
}
]
};
myChart.setOption(option, true);
},
echartsThree() {
let myChart = echarts.init(document.getElementById("echartsThree"));
myChart.clear();
let xLabel = [
"2021-08-08",
"2021-08-09",
"2021-08-10",
"2021-08-11",
"2021-08-12",
"2021-08-13"
];
let data = [3, 6, 4, 5, 2, 6];
let option = {
grid: {
top: "8%",
left: "15%",
right: "5%",
bottom: "15%"
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: true,
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
}
},
axisLabel: {
textStyle: {
color: "#797D98",
padding: 16,
fontSize: 26
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
data: xLabel
}
],
yAxis: [
{
min: 0,
splitLine: {
show: false
},
axisLine: {
show: true,
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#797D98",
fontSize: 26
}
},
axisTick: {
show: false
}
}
],
series: [
{
name: "监测",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 5,
color: "rgba(25,163,223,1)"
},
borderColor: "rgba(0,0,0,.4)"
},
itemStyle: {
color: "rgba(25,163,223,1)",
borderColor: "#646ace",
borderWidth: 2
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(25,163,223,.3)"
},
{
offset: 1,
color: "rgba(25,163,223, 0)"
}
],
false
),
shadowColor: "rgba(25,163,223, 0.5)",
shadowBlur: 20
}
},
data: data
}
]
};
myChart.setOption(option, true);
},
echartsFour() {
let myChart = echarts.init(document.getElementById("echartsFour"));
myChart.clear();
let xLabel = ["2017", "2018", "2019", "2020", "2021", "2022"];
let one = [40, 60, 22, 85, 50, 40];
let two = [50, 70, 20, 90, 60, 50];
let three = [30, 80, 30, 40, 90, 30];
let option = {
color: ["#0B8FFF", "#F9C725", "#47C77D"],
grid: {
top: "8%",
left: "15%",
right: "5%",
bottom: "30%"
},
legend: {
bottom: 20,
left: "center",
itemGap: 50,
itemWidth: 40,
itemHeight: 30,
icon: "rect",
textStyle: {
fontSize: 30,
color: "#FFFFFF"
},
data: ["生活", "工业", "养殖"]
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: true,
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
}
},
axisLabel: {
textStyle: {
color: "#797D98",
padding: 16,
fontSize: 26
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
data: xLabel
}
],
yAxis: [
{
min: 0,
splitLine: {
show: false
},
axisLine: {
show: true,
symbol: ["none", "arrow"],
lineStyle: {
color: "#797D98"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#797D98",
fontSize: 26
}
},
axisTick: {
show: false
}
}
],
series: [
{
name: "生活",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 5,
color: "rgba(25,163,223,1)"
},
borderColor: "rgba(0,0,0,.4)"
},
itemStyle: {
color: "rgba(25,163,223,1)",
borderColor: "#646ace",
borderWidth: 2
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(25,163,223,.3)"
},
{
offset: 1,
color: "rgba(25,163,223, 0)"
}
],
false
),
shadowColor: "rgba(25,163,223, 0.5)",
shadowBlur: 20
}
},
data: one
},
{
name: "工业",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 5,
color: "rgba(249, 199, 37, 1)"
},
borderColor: "rgba(0,0,0,.4)"
},
itemStyle: {
color: "rgba(249, 199, 37, 1)",
borderColor: "#646ace",
borderWidth: 2
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(249, 199, 37, 0.3)"
},
{
offset: 1,
color: "rgba(25,163,223, 0)"
}
],
false
),
shadowColor: "rgba(249, 199, 37, 0.5)",
shadowBlur: 20
}
},
data: two
},
{
name: "养殖",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 5,
color: "rgba(71, 199, 125, 1)"
},
borderColor: "rgba(0,0,0,.4)"
},
itemStyle: {
color: "rgba(71, 199, 125, 1)",
borderColor: "#646ace",
borderWidth: 2
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(71, 199, 125, 0.3)"
},
{
offset: 1,
color: "rgba(25,163,223, 0)"
}
],
false
),
shadowColor: "rgba(71, 199, 125, 0.5)",
shadowBlur: 20
}
},
data: three
}
]
};
myChart.setOption(option, true);
},
echartsFive() {
this.echart1New(
41,
"echartsFive",
this.typePlanData[this.typePlanId],
["#203861", "#2cb7fb"],
"#22268a"
);
// let myChart = echarts.init(document.getElementById('echartsFive'));
// myChart.clear();
// let xLabel = ['7', '8', '9', '10', '11', '12'];
// let one = [40, 60, 22, 85, 50, 40];
// let two = [50, 70, 20, 90, 60, 50];
// let three = [30, 80, 30, 40, 90, 30];
// let option = {
// grid: {
// top: '20%',
// left: '10%',
// right: '5%',
// bottom: '10%'
// },
// title: {
// text: ""
// },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "cross",
// label: {
// backgroundColor: "#88b1d0"
// }
// },
// textStyle: {
// fontSize: 20
// }
// },
// legend: {
// top: 10,
// left: 'center',
// itemGap: 50,
// itemWidth: 40,
// itemHeight: 30,
// icon: 'rect',
// textStyle: {
// fontSize: 30,
// color: '#FFFFFF',
// },
// data: ['进水量', '处理量']
// },
// xAxis: [{
// type: 'category',
// boundaryGap: false,
// axisLine: {
// show: true,
// symbol: ['none', 'none'],
// lineStyle: {
// color: '#1c2e52'
// },
// },
// axisLabel: {
// textStyle: {
// color: '#88b1d0',
// padding: 16,
// fontSize: 26
// }
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: false,
// },
// data: xLabel
// }],
// yAxis: [{
// min: 0,
// splitLine: {
// show: true,
// lineStyle: {
// color: "#1c2e52"
// }
// },
// axisLine: {
// show: true,
// symbol: ['none', 'none'],
// lineStyle: {
// color: "#1c2e52"
// }
// },
// axisLabel: {
// show: true,
// textStyle: {
// color: '#88b1d0',
// fontSize: 26
// }
// },
// axisTick: {
// show: false,
// },
// }],
// series: [{
// name: '进水量',
// type: 'line',
// symbol: 'circle',
// showAllSymbol: true,
// symbolSize: 0,
// smooth: true,
// lineStyle: {
// normal: {
// width: 5,
// color: "rgba(25,163,223,0)"
// },
// borderColor: 'rgba(0,0,0,.4)'
// },
// itemStyle: {
// color: "rgba(25,163,223,0.9)",
// borderColor: "#646ace",
// borderWidth: 2
// },
// tooltip: {
// show: true
// },
// areaStyle: {
// normal: {
// color: 'rgba(25,163,223,0.9)'
// }
// },
// data: one
// }, {
// name: '处理量',
// type: 'line',
// symbol: 'circle',
// showAllSymbol: true,
// symbolSize: 0,
// smooth: true,
// lineStyle: {
// normal: {
// width: 5,
// color: "rgba(25,163,223,0)"
// },
// borderColor: 'rgba(0,0,0,.4)'
// },
// itemStyle: {
// color: "rgba(75,99,112, 0.3)",
// borderColor: "#646ace",
// borderWidth: 0
// },
// tooltip: {
// show: true
// },
// areaStyle: {
// normal: {
// color: 'rgba(75,99,112, 0.3)'
// }
// },
// data: three
// }]
// };
// myChart.setOption(option, true);
},
echartsSix() {
let myChart = echarts.init(document.getElementById("echartsSix"));
debugger
// myChart.clear();
let dataOne = 44;
let dataTwo = 54;
// let option = {
// series: [
// {
// name: "第二盘内部刻度",
// type: "gauge",
// center: ["50%", "45%"],
// radius: "55%",
// min: 0, //最小刻度
// max: 100, //最大刻度
// splitNumber: 10, //刻度数量
// startAngle: 225,
// endAngle: -45,
// axisLine: {
// show: true,
// lineStyle: {
// width: 1,
// color: [[1, "rgba(0,0,0,0)"]]
// }
// }, //仪表盘轴线
// axisLabel: {
// show: true,
// distance: -20,
// fontSize: 26,
// color: "#b6dadd",
// formatter: function(v) {
// switch (v + "") {
// case "0":
// return "0";
// case "10":
// return "10";
// case "20":
// return "20";
// case "30":
// return "30";
// case "40":
// return "40";
// case "50":
// return "50";
// case "60":
// return "60";
// case "70":
// return "70";
// case "80":
// return "80";
// case "90":
// return "90";
// case "100":
// return "100";
// }
// }
// },
// axisTick: {
// show: true,
// splitNumber: 7,
// lineStyle: {
// color: "#2377ff",
// width: 1
// },
// length: -8
// },
// splitLine: {
// show: false
// },
// detail: {
// show: false
// }
// },
// {
// name: "第二盘外框",
// type: "gauge",
// center: ["50%", "45%"],
// radius: "70%",
// splitNumber: 10,
// axisLine: {
// lineStyle: {
// color: [
// [dataTwo / 100, "#0189ff"],
// [1, "#073a71"]
// ],
// width: 15
// }
// },
// detail: {
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// textBorderColor: "#000",
// textBorderWidth: 1,
// textShadowBlur: 1,
// textShadowColor: "#0189FF",
// textShadowOffsetX: 0,
// textShadowOffsetY: 0,
// paddingTop: 10,
// fontFamily: "digital",
// fontSize: 53,
// width: 30,
// color: "#0189FF",
// rich: {},
// offsetCenter: [0, "120%"],
// formatter: function(value) {
// return value + "%";
// }
// },
// title: {
// fontSize: 34,
// fontColor: "#FFFFFF",
// color: "#FFFFFF",
// paddingTop: 10,
// offsetCenter: [0, "85%"]
// },
// pointer: {
// show: false
// },
// axisLabel: {
// show: false
// },
// axisTick: {
// show: false
// },
// splitLine: {
// show: false
// },
// itemStyle: {
// show: false
// },
// data: [
// {
// value: dataTwo,
// name: "许可证拥有率"
// }
// ],
// pointer: {
// show: true,
// length: "50%",
// radius: "20%",
// width: 10 //指针粗细
// }
// }
// ]
// };
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option, true);
},
echartsSeven() {
let myChart = echarts.init(document.getElementById("echartsSeven"));
myChart.clear();
let colorList = ["#47C77D", "#0B8FFF", "#EE4646"];
let data = [
{
name: "正常",
value: 80
},
{
name: "低负荷",
value: 20
},
{
name: "超负荷",
value: 10
}
];
let total = 0;
data.map(item => {
total += parseFloat(item.value);
});
let option = {
title: {
text: "污水处理厂",
left: "center",
top: "middle",
textStyle: {
fontSize: 29,
color: "#B2C4E1"
}
},
series: [
{
name: "统计",
type: "pie",
center: ["50%", "50%"],
radius: ["50%", "70%"],
color: colorList,
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
color: "#ddd",
formatter: function(params) {
let percent = ((params.value / total) * 100).toFixed(0);
return `{a| ${params.name}} \n {b| (${percent}%)}`;
},
rich: {
a: {
color: "#B2C4E1",
fontSize: 29,
lineHeight: 50
},
b: {
color: "#FFFFFF",
fontSize: 34
}
}
},
labelLine: {
show: false
}
}
},
data: data
}
]
};
myChart.setOption(option, true);
myChart.on("click", this.eConsole);
},
eConsole(param) {
console.log("123=fff", param);
if (param.dataIndex === 1) {
this.popupData = JSON.parse(JSON.stringify(this.popupDi));
this.show = true;
} else if (param.dataIndex === 2) {
this.popupData = JSON.parse(JSON.stringify(this.popupChao));
this.show = true;
}
}
}
};
</script>
<style>
@import "../assets/css/wuRanYuanPing/style.css";
</style>
<style scoped>
.pollutionTraceabilityBox {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
background: rgba(0, 0, 0, 0.8);
}
.pollutionTraceability {
width: 2792px;
height: 1224px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url("../assets/images/liuyuping/sy_bg.png") no-repeat center;
/* background-color: rgba(0, 0, 0, 0.8); */
border-radius: 100px;
background-size: 100% 100%;
padding: 86px 60px 50px 60px;
box-sizing: border-box;
display: flex;
}
.pollutionTraceability .poll_header {
position: absolute;
top: 11px;
left: 51.5%;
transform: translateX(-50%);
font-size: 37px;
font-weight: bold;
text-align: center;
color: #fff;
}
.poll_close {
position: absolute;
bottom: -90px;
right: 50%;
transform: translateX(-50%);
cursor: pointer;
}
/* */
.zmui-l-l-t-l-info {
display: flex;
}
.zmui-l-l-t-l-i-echarts {
padding-top: 80px;
}
.zmui-l-l-t-l-i-dl {
padding-top: 30px;
text-align: center;
font-size: 26px;
color: #88b1d0;
}
.zmui-l-l-t-l-i-dl span {
font-size: 40px;
margin: 0 15px;
}
.zmui-l-l-t-l-i-ul {
padding-top: 80px;
}
/* ['#EE4646', '#F9C725', '#0B8FFF', '#47C77D'] */
.zmui-l-l-t-l-i-li {
padding-top: 20px;
}
.zmui-l-l-t-l-i-icon {
width: 40px;
height: 30px;
border-radius: 5px;
margin-top: 5px;
margin-right: 10px;
}
.zmui-l-l-t-l-i-li:nth-child(1) .zmui-l-l-t-l-i-icon {
background: #ee4646;
}
.zmui-l-l-t-l-i-li:nth-child(2) .zmui-l-l-t-l-i-icon {
background: #f9c725;
}
.zmui-l-l-t-l-i-li:nth-child(3) .zmui-l-l-t-l-i-icon {
background: #0b8fff;
}
.zmui-l-l-t-l-i-li:nth-child(4) .zmui-l-l-t-l-i-icon {
background: #47c77d;
}
.zmui-l-l-t-l-i-top {
display: flex;
height: 50px;
}
.zmui-l-l-t-l-i-name {
color: #b2c4e1;
font-size: 29px;
}
.zmui-l-l-t-l-i-bot {
color: #ffffff;
font-size: 34px;
}
/* */
.centerBox {
/* width: 3500px;
height: 1320px;
position: absolute;
top: 250px;
left: 3920px;
transform: translateX(-40%);
z-index: 100; */
width: 3006px;
height: 1320px;
position: absolute;
top: 250px;
left: 4255px;
transform: translateX(-40%);
z-index: 100;
}
.mapSelectBox {
display: flex;
position: absolute;
top: 35px;
left: 0px;
z-index: 9999;
}
.mapSelectBox > div {
padding-left: 36px;
}
.rl {
width: 840px;
margin-left: 80px;
margin-top: 30px;
}
.rl > img {
width: 100%;
}
.mt30 {
margin-top: 30px;
}
/* */
.zmui-echartsOne {
/* margin-top: 50px;
width: 100%;
height: 580px; */
width: 557px;
height: 340px;
}
.zmui-echartsTwo {
width: 100%;
height: 600px;
}
.zmui-echartsThree {
width: 100%;
height: 600px;
}
.zmui-echartsFour {
width: 100%;
height: 460px;
}
.zmui-echartsFive {
width: 100%;
height: 660px;
}
.zmui-echartsSix {
width: 100%;
height: 460px;
}
.zmui-echartsSeven {
width: 100%;
height: 460px;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
height: 174px;
/* background: url(../assets/images/wuRanYuanPing/ads/top.png) no-repeat center top; */
background: url("../assets/images/2.png") no-repeat center top;
background-size: 8541px auto;
}
.header .he-left {
display: flex;
}
.header .he-left li {
margin-right: 50px;
width: 174px;
cursor: pointer;
}
#wuranyuandaping {
width: 8640px;
height: 1620px;
/* background: #061535; */
font-size: 16px;
background: url(../assets/images/screen-bg.jpg) no-repeat center;
position: relative;
}
#menu {
display: flex;
}
.menu_item {
width: 175px;
height: 175px;
border-radius: 50%;
margin: 0px 30px;
}
.el-input .el-input__inner {
background-color: rgba(80, 136, 151, 0.1) !important;
border: 1px solid #83929d !important;
border-radius: 12px !important;
}
.tableIndex {
text-align: center;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background: url("../assets/images/liuyuping/bg2.png") no-repeat center;
background-size: 100% 100%;
color: #ffffff;
}
.zmui-r-td-three {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
width: 200px;
padding: 0px 20px;
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell,
/deep/ .el-table th,
/deep/ .el-table tr {
background-color: transparent !important;
}
/* /deep/ .el-table--border,
/deep/ .el-table--group,
/deep/ .el-table--border::after,
/deep/ .el-table--group::after,
/deep/ .el-table--border::after,
/deep/ .el-table--group::after,
/deep/ .el-table::before {
border: none;
background-color: transparent;
} */
.zmui-g-con >>> .el-table--border,
.zmui-g-con >>> .el-table--group,
.zmui-g-con >>> .el-table--border::after,
.zmui-g-con >>> .el-table--group::after,
.zmui-g-con >>> .el-table--border::after,
.zmui-g-con >>> .el-table--group::after,
.zmui-g-con >>> .el-table::before {
border: none;
background-color: transparent !important;
}
.zmui-echartsSeven {
width: 100%;
height: 460px;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
height: 174px;
/* background: url(../assets/images/wuRanYuanPing/ads/top.png) no-repeat center top; */
background: url("../assets/images/2.png") no-repeat center top;
background-size: 8541px auto;
}
.header .he-left {
display: flex;
}
.header .he-left li {
margin-right: 50px;
width: 174px;
cursor: pointer;
}
#wuranyuandaping {
width: 8640px;
height: 1620px;
/* background: #061535; */
font-size: 16px;
background: url(../assets/images/screen-bg.jpg) no-repeat center;
position: relative;
}
#menu {
display: flex;
}
.menu_item {
width: 175px;
height: 175px;
border-radius: 50%;
margin: 0px 30px;
}
.el-input .el-input__inner {
background-color: rgba(80, 136, 151, 0.1) !important;
border: 1px solid #83929d !important;
border-radius: 12px !important;
}
.tableIndex {
text-align: center;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background: url("../assets/images/liuyuping/bg2.png") no-repeat center;
background-size: 100% 100%;
color: #ffffff;
}
.zmui-r-td-three {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
width: 200px;
padding: 0px 20px;
}
</style>
echarts 环形
最新推荐文章于 2024-10-16 13:46:29 发布
扫一扫
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
