1525 lines
70 KiB
Vue
1525 lines
70 KiB
Vue
|
<template>
|
||
|
|
<el-container style="height: calc(100vh - 80px)" element-loading-text="拼命加载中" v-loading="konzhi">
|
||
|
|
<el-main class="main">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="18">
|
||
|
|
<el-form :inline="true" class="demo-form-inline">
|
||
|
|
<el-form-item label="指标类型:">
|
||
|
|
<el-select
|
||
|
|
v-model="formData.statisticalType"
|
||
|
|
@change="gbName"
|
||
|
|
placeholder="请选择指标类型"
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in classificationData"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="{
|
||
|
|
label: item.name,
|
||
|
|
value: item.id,
|
||
|
|
name: item.name,
|
||
|
|
id: item.id,
|
||
|
|
code: item.code,
|
||
|
|
sort: item.sort
|
||
|
|
}"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<timepicker
|
||
|
|
:id="id"
|
||
|
|
ref="fyf"
|
||
|
|
@querfromdata="querfromdata"
|
||
|
|
@chufatype="chufatype"
|
||
|
|
:interval="interval"
|
||
|
|
:name="name"
|
||
|
|
:path="path"
|
||
|
|
></timepicker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-tooltip
|
||
|
|
style="margin-left: 0%"
|
||
|
|
class="item"
|
||
|
|
effect="dark"
|
||
|
|
content="电能质量污区图算法"
|
||
|
|
placement="top"
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
@click="algorithm('电能质量污区图')"
|
||
|
|
style="
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 5px;
|
||
|
|
z-index: 10000;
|
||
|
|
margin-left: 10px;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 3px;
|
||
|
|
"
|
||
|
|
size="mini"
|
||
|
|
type="primary"
|
||
|
|
circle
|
||
|
|
icon="el-icon-warning-outline"
|
||
|
|
></el-button>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-form>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="12">
|
||
|
|
<span class="wr">污染预警描述:</span>
|
||
|
|
<el-tag style="background: #cc0000; color: #fff" size="mini">5级</el-tag>
|
||
|
|
<span>:重度污染</span>
|
||
|
|
<el-tag style="background: #ffcc00; color: #fff" size="mini">4级</el-tag>
|
||
|
|
<span>:中度污染</span>
|
||
|
|
<el-tag style="background: #ff9900; color: #fff" size="mini">3级</el-tag>
|
||
|
|
<span>:轻度污染</span>
|
||
|
|
<el-tag style="background: #3399ff; color: #fff" size="mini">2级</el-tag>
|
||
|
|
<span>:轻微污染</span>
|
||
|
|
<el-tag style="background: #339933; color: #fff" size="mini">1级</el-tag>
|
||
|
|
<span>:无污染</span>
|
||
|
|
<el-tag style="background: #cccc; color: #fff" size="mini">无</el-tag>
|
||
|
|
<span>:无数据</span>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
padding-top: 10px;
|
||
|
|
height: calc(100vh - 140px);
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
|
|
grid-template-rows: subgrid;
|
||
|
|
grid-gap: 10px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(item, index) in listcard"
|
||
|
|
style="border-radius: 4px; overflow: hidden; min-height: 300px"
|
||
|
|
class="box-card3"
|
||
|
|
:style="
|
||
|
|
'color:#fff;opacity:0.8;background-image:linear-gradient(' +
|
||
|
|
settings.themeColor +
|
||
|
|
',#ccc);'
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
slot="header"
|
||
|
|
class="clearfix"
|
||
|
|
:style="
|
||
|
|
'background:' +
|
||
|
|
settings.themeColor +
|
||
|
|
';padding:5px;cursor: pointer;'
|
||
|
|
"
|
||
|
|
@click="queryStation(item)"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
line-height: 20px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: bold;
|
||
|
|
float: right;
|
||
|
|
font-size: 14px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</span>
|
||
|
|
<el-tag
|
||
|
|
v-if="item.data == 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #999999;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
无
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="0 <= item.data && item.data < 1 && item.data !== 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #339933;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
1级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #3399ff;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
2级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #ff9900;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
3级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #ffcc00;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
4级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="2 <= item.data && item.data && item.data !== 3.14159"
|
||
|
|
style="
|
||
|
|
line-height: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
float: left;
|
||
|
|
color: #fff;
|
||
|
|
background: #cc0000;
|
||
|
|
"
|
||
|
|
type=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
5级
|
||
|
|
</el-tag>
|
||
|
|
</div>
|
||
|
|
<div style="height: calc(100% - 30px); overflow-y: auto; overflow-x: hidden">
|
||
|
|
<el-col
|
||
|
|
:span="12"
|
||
|
|
v-for="(item1, index1) in item.children"
|
||
|
|
:key="index1"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="height: 30px; background: ; margin-top: 1%; cursor: pointer"
|
||
|
|
@click="queryline(item1.id, item1.pid, item1.name)"
|
||
|
|
>
|
||
|
|
<el-tag
|
||
|
|
v-if="item1.data == 3.14159"
|
||
|
|
style="'float: left;color:#fff;background:#999999"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
无
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="0 <= item1.data && item1.data < 1 && item1.data !== 3.14159"
|
||
|
|
style="'float: left;color:#fff;background:#339933"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
1级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
|
||
|
|
style="'float: left;color:#fff;background:#3399FF"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
2级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="
|
||
|
|
1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159
|
||
|
|
"
|
||
|
|
style="'float: left;color:#fff;background:#FF9900"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
3级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
|
||
|
|
style="'float: left;color:#fff;background:#FFCC00"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
4级
|
||
|
|
</el-tag>
|
||
|
|
<el-tag
|
||
|
|
v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
|
||
|
|
style="'float: left;color:#fff;background:#cc0000"
|
||
|
|
type=""
|
||
|
|
icon=""
|
||
|
|
size="mini"
|
||
|
|
>
|
||
|
|
5级
|
||
|
|
</el-tag>
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
line-height: 0.6rem;
|
||
|
|
color: #000;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-left: 2%;
|
||
|
|
font-size: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<el-tooltip
|
||
|
|
class="item"
|
||
|
|
effect="dark"
|
||
|
|
:content="item1.name"
|
||
|
|
placement="top"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
size="mini"
|
||
|
|
type="text"
|
||
|
|
style="color: #000; font-weight: bold"
|
||
|
|
>
|
||
|
|
{{ item1.name.substr(0, 6) }}
|
||
|
|
</span>
|
||
|
|
</el-tooltip>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24" id="klj">
|
||
|
|
<qypowerpollution
|
||
|
|
v-if="qy"
|
||
|
|
:xdata="xdata"
|
||
|
|
:ydata="ydata"
|
||
|
|
:title="title"
|
||
|
|
ref="child"
|
||
|
|
></qypowerpollution>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-table
|
||
|
|
v-if="table"
|
||
|
|
stripe
|
||
|
|
:data="tableData"
|
||
|
|
class="xshou"
|
||
|
|
border
|
||
|
|
header-cell-class-name="table_header"
|
||
|
|
height="calc(55vh - 127px)"
|
||
|
|
:style="'width: 100%'"
|
||
|
|
>
|
||
|
|
<el-table-column align="center" prop="name" label="名称"></el-table-column>
|
||
|
|
<el-table-column align="center" prop="data" :label="changeName2">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">
|
||
|
|
暂无数据
|
||
|
|
</span>
|
||
|
|
<span v-if="scope.row.data !== 3.14159" type="primary" size="small">
|
||
|
|
{{ scope.row.data.toFixed(2) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" prop="data" label="评估">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
0 <= scope.row.data &&
|
||
|
|
scope.row.data < 1 &&
|
||
|
|
scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
无污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
1 <= scope.row.data &&
|
||
|
|
scope.row.data < 1.2 &&
|
||
|
|
scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻微污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
1.2 <= scope.row.data &&
|
||
|
|
scope.row.data < 1.6 &&
|
||
|
|
scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
1.6 <= scope.row.data &&
|
||
|
|
scope.row.data < 2 &&
|
||
|
|
scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
中度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
2 <= scope.row.data &&
|
||
|
|
scope.row.data &&
|
||
|
|
scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
重度污染
|
||
|
|
</span>
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">
|
||
|
|
暂无评估
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<!--变电站-->
|
||
|
|
<el-dialog
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
:title="stationNmae + '详情'"
|
||
|
|
width="70%"
|
||
|
|
class="eldialot"
|
||
|
|
:visible.sync="dialogTableVisible"
|
||
|
|
>
|
||
|
|
<el-table
|
||
|
|
stripe
|
||
|
|
:data="stationData"
|
||
|
|
border
|
||
|
|
height="60vh"
|
||
|
|
v-loading="konzhi"
|
||
|
|
element-loading-text="拼命加载中"
|
||
|
|
header-cell-class-name="table_header"
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column align="center" property="name" label="名称"></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
property="voltageLevel"
|
||
|
|
v-if="flag"
|
||
|
|
:label="zdname"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column align="center" property="data" :label="changeName2">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
|
||
|
|
<span v-if="scope.row.data !== 3.14159" type="primary" size="small">
|
||
|
|
{{ scope.row.data.toFixed(2) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" property="data" label="评估">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无评估</span>
|
||
|
|
<span
|
||
|
|
v-if="0 <= scope.row.data && scope.row.data < 1 && scope.row.data !== 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
无污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="1 <= scope.row.data && scope.row.data < 1.2 && scope.row.data !== 3.14159"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻微污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
1.2 <= scope.row.data && scope.row.data < 1.6 && scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="1.6 <= scope.row.data && scope.row.data < 2 && scope.row.data !== 3.14159"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
中度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
重度污染
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
<!--监测点-->
|
||
|
|
<el-dialog
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
:title="lineName + '所属监测点详情'"
|
||
|
|
width="70%"
|
||
|
|
class="eldialot"
|
||
|
|
:visible.sync="dialogTableVisible1"
|
||
|
|
>
|
||
|
|
<el-table
|
||
|
|
stripe
|
||
|
|
:data="lineData"
|
||
|
|
v-loading="konzhi"
|
||
|
|
element-loading-text="拼命加载中"
|
||
|
|
header-cell-class-name="table_header"
|
||
|
|
border
|
||
|
|
height="60vh"
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column align="center" property="name" label="名称"></el-table-column>
|
||
|
|
<el-table-column align="center" property="powerCompany" label="供电公司"></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
property="substation"
|
||
|
|
label="变电站"
|
||
|
|
:show-overflow-tooltip="true"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column align="center" property="busBar" label="母线"></el-table-column>
|
||
|
|
<el-table-column align="center" property="data" :label="changeName2">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
|
||
|
|
<span v-if="scope.row.data !== 3.14159" type="primary" size="small">
|
||
|
|
{{ scope.row.data.toFixed(2) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" property="data" label="评估">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无评估</span>
|
||
|
|
<span
|
||
|
|
v-if="0 <= scope.row.data && scope.row.data < 1 && scope.row.data !== 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
无污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="1 <= scope.row.data && scope.row.data < 1.2 && scope.row.data !== 3.14159"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻微污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="
|
||
|
|
1.2 <= scope.row.data && scope.row.data < 1.6 && scope.row.data !== 3.14159
|
||
|
|
"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
轻度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="1.6 <= scope.row.data && scope.row.data < 2 && scope.row.data !== 3.14159"
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
中度污染
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
重度污染
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
<!--排名前十监测点-->
|
||
|
|
<el-dialog
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
title="排名前10的监测点"
|
||
|
|
width="70%"
|
||
|
|
class="eldialot"
|
||
|
|
:visible.sync="dialogTableVisible2"
|
||
|
|
>
|
||
|
|
<div id="tenlineechart" :style="'width:100%;height:calc(100vh - 400px);zoom:' + device"></div>
|
||
|
|
</el-dialog>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import api from '@/api/pollution/pollution'
|
||
|
|
import { getappheight, getheight, gettwoechartsheight } from '@/assets/commjs/common'
|
||
|
|
import {
|
||
|
|
noContaminated,
|
||
|
|
qwContaminated,
|
||
|
|
qdContaminated,
|
||
|
|
centerContaminated,
|
||
|
|
zdContaminated
|
||
|
|
} from '@/assets/commjs/color'
|
||
|
|
import { mapActions } from 'vuex'
|
||
|
|
import store from '@/store'
|
||
|
|
import defaultSettings from '@/settings'
|
||
|
|
import { dicData } from '../../../assets/commjs/dictypeData'
|
||
|
|
import timepicker from '@/views/cgy-components/TimePicker/index4'
|
||
|
|
import qypowerpollution from '@/views/cgy-components/echarts/qypowerpollution'
|
||
|
|
import { color } from 'echarts'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
timepicker,
|
||
|
|
qypowerpollution
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
settings() {
|
||
|
|
return this.$store.state.settings
|
||
|
|
}
|
||
|
|
// ...mapActions({
|
||
|
|
// changeSetting: 'settings/changeSetting'
|
||
|
|
// }),
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
interval(a, b) {
|
||
|
|
if (a == 1) {
|
||
|
|
this.formData.reportFlag = 1
|
||
|
|
} else if (a == 2) {
|
||
|
|
this.formData.reportFlag = 2
|
||
|
|
} else if (a == 3) {
|
||
|
|
this.formData.reportFlag = 3
|
||
|
|
} else if (a == 4) {
|
||
|
|
this.formData.reportFlag = 4
|
||
|
|
} else if (a == 5) {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// color:window.localStorage.CUSTOM_SETTINGS.themeColor,
|
||
|
|
h: undefined,
|
||
|
|
table: false,
|
||
|
|
vh: null,
|
||
|
|
qy: true,
|
||
|
|
loading: true,
|
||
|
|
echartsheight: undefined,
|
||
|
|
tenheight: undefined,
|
||
|
|
konzhi: true,
|
||
|
|
pickerOptions: {
|
||
|
|
shortcuts: [
|
||
|
|
{
|
||
|
|
text: '最近一周',
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '最近一个月',
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '最近三个月',
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
timevalue: [],
|
||
|
|
zdname: '',
|
||
|
|
Indextype: undefined,
|
||
|
|
interval: 3,
|
||
|
|
stationData: [],
|
||
|
|
lineData: [],
|
||
|
|
// tenlineData:[],
|
||
|
|
dialogTableVisible: false,
|
||
|
|
dialogTableVisible1: false,
|
||
|
|
dialogTableVisible2: false,
|
||
|
|
path: '/harmonic-boot/qydetailedAnalysis/pollutionqy',
|
||
|
|
name: 'wtzhpg',
|
||
|
|
asideheight: undefined,
|
||
|
|
rightheight: undefined,
|
||
|
|
tableheight: undefined,
|
||
|
|
changeName2: '谐波电压(%)',
|
||
|
|
changeName: '谐波电压(%)',
|
||
|
|
|
||
|
|
voltage: 0,
|
||
|
|
voltageoption: [],
|
||
|
|
fanwei: 0,
|
||
|
|
fanweioption: [],
|
||
|
|
copent: 0,
|
||
|
|
copentoption: [],
|
||
|
|
id: 1,
|
||
|
|
title: '部门',
|
||
|
|
xdata: [],
|
||
|
|
ydata: [],
|
||
|
|
dataList: [],
|
||
|
|
activeName: 'tab1',
|
||
|
|
panindexOptions: [],
|
||
|
|
classvalue: '',
|
||
|
|
classificationData: [],
|
||
|
|
flag: false,
|
||
|
|
stationNmae: '',
|
||
|
|
lineName: '',
|
||
|
|
formData: {
|
||
|
|
deptIndex: '',
|
||
|
|
id: '',
|
||
|
|
//loadType:null,
|
||
|
|
//manufacturer:null,
|
||
|
|
monitorFlag: 2,
|
||
|
|
powerFlag: 2,
|
||
|
|
reportFlag: 3,
|
||
|
|
|
||
|
|
//scale:null,
|
||
|
|
searchBeginTime: '',
|
||
|
|
searchEndTime: '',
|
||
|
|
//serverName:'',
|
||
|
|
statisticalType: []
|
||
|
|
},
|
||
|
|
device: 1,
|
||
|
|
listcard: [],
|
||
|
|
tableData: [],
|
||
|
|
eachartfalg: false,
|
||
|
|
xdata1: [],
|
||
|
|
ydata1: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
let data = window.sessionStorage.getItem('Info')
|
||
|
|
data = eval('(' + data + ')')
|
||
|
|
this.formData.deptIndex = data.deptId
|
||
|
|
this.getIndexType()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.vh = window.sessionStorage.getItem('appheight') - 50 + 'px'
|
||
|
|
this.device = window.devicePixelRatio
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
algorithm(name) {
|
||
|
|
let pathInfo = this.$router.resolve({
|
||
|
|
path: '/algorithm/algorithm1',
|
||
|
|
query: {
|
||
|
|
name: name
|
||
|
|
}
|
||
|
|
})
|
||
|
|
window.open(pathInfo.href, '算法帮助')
|
||
|
|
},
|
||
|
|
chufatype(val) {
|
||
|
|
this.formData.reportFlag = val
|
||
|
|
},
|
||
|
|
guanzhou() {
|
||
|
|
let data = {
|
||
|
|
token: this.$route.query.token
|
||
|
|
}
|
||
|
|
api.guanzhou(data).then(res => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
return
|
||
|
|
} else {
|
||
|
|
this.$router.push('/error/massege/403')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
...mapActions({
|
||
|
|
changeSetting: 'settings/changeSetting'
|
||
|
|
}),
|
||
|
|
//切换指标类型
|
||
|
|
gbName(val) {
|
||
|
|
if (val.code == 'V_Harmonic') {
|
||
|
|
this.changeName = '谐波电压(%)'
|
||
|
|
}
|
||
|
|
if (val.code == 'I_All') {
|
||
|
|
this.changeName = '谐波电流(%)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//字典获取数据指标类型
|
||
|
|
getIndexType() {
|
||
|
|
let code = 'Pollution_Statis'
|
||
|
|
this.classificationData = dicData(code, ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
|
||
|
|
this.formData.statisticalType = this.classificationData[0]
|
||
|
|
},
|
||
|
|
//变电站详情
|
||
|
|
queryStation(i) {
|
||
|
|
this.konzhi = true
|
||
|
|
this.formData.deptIndex = i.id
|
||
|
|
this.zdname = '电压等级'
|
||
|
|
this.stationNmae = i.name
|
||
|
|
this.flag = true
|
||
|
|
this.dialogTableVisible = true
|
||
|
|
api.getSubstation(this.formData).then(res => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
this.stationData = res.data
|
||
|
|
this.konzhi = false
|
||
|
|
// var msg = new SpeechSynthesisUtterance(res.message);
|
||
|
|
// window.speechSynthesis.speak(msg);
|
||
|
|
} else {
|
||
|
|
this.stationData = []
|
||
|
|
this.konzhi = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//监测点详情
|
||
|
|
queryline(id, pid, name) {
|
||
|
|
this.konzhi = true
|
||
|
|
this.lineData = []
|
||
|
|
this.formData.deptIndex = pid
|
||
|
|
this.formData.id = id
|
||
|
|
this.flag = false
|
||
|
|
this.lineName = name
|
||
|
|
this.dialogTableVisible1 = true
|
||
|
|
api.getLineInfo(this.formData).then(res => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
this.lineData = res.data
|
||
|
|
this.konzhi = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//排名前十监测点
|
||
|
|
tensort() {
|
||
|
|
this.dialogTableVisible2 = true
|
||
|
|
api.getLineRank(this.formData).then(res => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
let data = res.data
|
||
|
|
let xarr = []
|
||
|
|
let yarr = []
|
||
|
|
data.forEach(element => {
|
||
|
|
xarr.push(element.name)
|
||
|
|
yarr.push(element.data)
|
||
|
|
})
|
||
|
|
this.xdata1 = xarr
|
||
|
|
for (var i = 0; i < yarr.length; i++) {
|
||
|
|
if (yarr[i] > 0 && yarr[i] < 1) {
|
||
|
|
yarr[i] = (yarr[i] / 1) * 20
|
||
|
|
} else if (yarr[i] >= 1 && yarr[i] < 1.2) {
|
||
|
|
yarr[i] = (yarr[i] / 1.2) * 40
|
||
|
|
} else if (yarr[i] >= 1.2 && yarr[i] < 1.6) {
|
||
|
|
yarr[i] = (yarr[i] / 1.6) * 60
|
||
|
|
} else if (yarr[i] >= 1.6 && yarr[i] < 2) {
|
||
|
|
yarr[i] = (yarr[i] / 2) * 80
|
||
|
|
} else if (yarr[i] >= 2) {
|
||
|
|
yarr[i] = (yarr[i] / 2) * 100
|
||
|
|
} else if (yarr[i] == 0) {
|
||
|
|
yarr[i] = 1
|
||
|
|
} else if (yarr[i] == 3.14159) {
|
||
|
|
yarr[i] = 2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.ydata1 = yarr
|
||
|
|
}
|
||
|
|
// this.$nextTick(()=> {
|
||
|
|
|
||
|
|
// })
|
||
|
|
this.tenlineData1()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//时间格式转化
|
||
|
|
dateFormat(dateData1, dateData2) {
|
||
|
|
var timearr = []
|
||
|
|
var date = new Date(dateData1)
|
||
|
|
var y = date.getFullYear()
|
||
|
|
var m = date.getMonth() + 1
|
||
|
|
m = m < 10 ? '0' + m : m
|
||
|
|
var d = date.getDate()
|
||
|
|
d = d < 10 ? '0' + d : d
|
||
|
|
var h = date.getHours()
|
||
|
|
h = h < 10 ? '0' + h : h
|
||
|
|
var f = date.getMinutes()
|
||
|
|
f = f < 10 ? '0' + f : f
|
||
|
|
var s = date.getSeconds()
|
||
|
|
s = s < 10 ? '0' + s : s
|
||
|
|
this.formData.searchBeginTime = y + '-' + m + '-' + d
|
||
|
|
timearr.push(this.formData.searchBeginTime)
|
||
|
|
var date = new Date(dateData2)
|
||
|
|
var y = date.getFullYear()
|
||
|
|
var m = date.getMonth() + 1
|
||
|
|
m = m < 10 ? '0' + m : m
|
||
|
|
var d = date.getDate()
|
||
|
|
d = d < 10 ? '0' + d : d
|
||
|
|
var h = date.getHours()
|
||
|
|
h = h < 10 ? '0' + h : h
|
||
|
|
var f = date.getMinutes()
|
||
|
|
f = f < 10 ? '0' + f : f
|
||
|
|
var s = date.getSeconds()
|
||
|
|
s = s < 10 ? '0' + s : s
|
||
|
|
this.formData.searchEndTime = y + '-' + m + '-' + d
|
||
|
|
timearr.push(this.formData.searchEndTime)
|
||
|
|
return timearr
|
||
|
|
},
|
||
|
|
//查询触发//获取部门变电站数据
|
||
|
|
querfromdata(data, timehbValue, interval) {
|
||
|
|
this.interval = interval
|
||
|
|
this.konzhi = true
|
||
|
|
this.tableData = []
|
||
|
|
this.timeValue = data
|
||
|
|
// this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||
|
|
if (this.$refs.fyf.intervald == 3) {
|
||
|
|
let timedate = this.$refs.fyf.timeValue[1]
|
||
|
|
let timedate1 = timedate.split('-')
|
||
|
|
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
|
|
let strTime = this.$refs.fyf.timeValue[0]
|
||
|
|
let strTime1 = this.$refs.fyf.timeValue[1]
|
||
|
|
let str1 = strTime.split('-')
|
||
|
|
let str2 = strTime1.split('-')
|
||
|
|
var now = new Date()
|
||
|
|
let month = now.getMonth()
|
||
|
|
if (month == 0) {
|
||
|
|
month = 12
|
||
|
|
str1[0] = str1[0] - 1
|
||
|
|
str2[0] = str2[0] - 1
|
||
|
|
}
|
||
|
|
if (month < 10) {
|
||
|
|
month = '0' + month
|
||
|
|
}
|
||
|
|
this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
|
||
|
|
if (
|
||
|
|
month == 1 ||
|
||
|
|
month == 3 ||
|
||
|
|
month == 5 ||
|
||
|
|
month == 7 ||
|
||
|
|
month == 8 ||
|
||
|
|
month == 10 ||
|
||
|
|
month == 12
|
||
|
|
) {
|
||
|
|
this.formData.searchEndTime = str2[0] + '-' + month + '-31'
|
||
|
|
} else {
|
||
|
|
this.formData.searchEndTime = str2[0] + '-' + month + '-30'
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.formData.searchBeginTime = this.$refs.fyf.timeValue[0]
|
||
|
|
this.formData.searchEndTime = this.$refs.fyf.timeValue[1]
|
||
|
|
}
|
||
|
|
} else if (this.$refs.fyf.intervald == 4) {
|
||
|
|
let timedate = this.$refs.fyf.timeValue[1]
|
||
|
|
let timedate1 = timedate.split('-')
|
||
|
|
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
|
|
// 获取前七天的日期
|
||
|
|
var previousDates = []
|
||
|
|
for (var i = 6; i >= 0; i--) {
|
||
|
|
//var previousDate = new Date(currentDate);
|
||
|
|
let strTime = this.$refs.fyf.timeValue[0]
|
||
|
|
var currentDate = new Date(strTime)
|
||
|
|
let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||
|
|
previousDate.setDate(currentDate.getDate() - i)
|
||
|
|
previousDates.push(previousDate)
|
||
|
|
}
|
||
|
|
// 格式化日期
|
||
|
|
var formattedDates = previousDates.map(function (date) {
|
||
|
|
var year = date.getFullYear()
|
||
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
|
|
var day = date.getDate().toString().padStart(2, '0')
|
||
|
|
|
||
|
|
let d = year + '-' + month + '-' + day
|
||
|
|
// console.log("+++++++++++",d)
|
||
|
|
// 输出前七天的日期数组
|
||
|
|
return d
|
||
|
|
})
|
||
|
|
this.formData.searchBeginTime = formattedDates[0]
|
||
|
|
this.formData.searchEndTime = formattedDates[formattedDates.length - 1]
|
||
|
|
// console.log(formattedDates);
|
||
|
|
} else {
|
||
|
|
this.formData.searchBeginTime = this.$refs.fyf.timeValue[0]
|
||
|
|
this.formData.searchEndTime = this.$refs.fyf.timeValue[1]
|
||
|
|
}
|
||
|
|
} else if (this.$refs.fyf.intervald == 5) {
|
||
|
|
let timedate = this.$refs.fyf.timeValue[1]
|
||
|
|
let timedate1 = timedate.split('-')
|
||
|
|
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
|
|
let strTime = this.$refs.fyf.timeValue[0]
|
||
|
|
let currentDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||
|
|
// console.log('当前日期（中国标准时间）：', currentDate);
|
||
|
|
// console.log("++++",currentDate)
|
||
|
|
|
||
|
|
// 向前推一天
|
||
|
|
currentDate.setDate(currentDate.getDate() - 1)
|
||
|
|
|
||
|
|
// 格式化日期字符串
|
||
|
|
const formatDate = date => {
|
||
|
|
const year = date.getFullYear()
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
||
|
|
return `${year}-${month}-${day}`
|
||
|
|
}
|
||
|
|
let strTime2 = this.$refs.fyf.timeValue[1]
|
||
|
|
let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g, '/')))
|
||
|
|
// console.log('当前日期（中国标准时间）：', currentDate);
|
||
|
|
// console.log("++++",currentDate)
|
||
|
|
|
||
|
|
// 向前推一天
|
||
|
|
currentDate.setDate(currentDate.getDate() - 1)
|
||
|
|
|
||
|
|
// 格式化日期字符串
|
||
|
|
const formatDate2 = date => {
|
||
|
|
const year = date.getFullYear()
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
||
|
|
return `${year}-${month}-${day}`
|
||
|
|
}
|
||
|
|
// console.log('当前日期：', formatDate(new Date())); // 当前日期
|
||
|
|
// console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
|
||
|
|
this.formData.searchBeginTime = formatDate(currentDate)
|
||
|
|
this.formData.searchEndTime = formatDate(currentDate2)
|
||
|
|
} else {
|
||
|
|
this.formData.searchBeginTime = this.$refs.fyf.timeValue[0]
|
||
|
|
this.formData.searchEndTime = this.$refs.fyf.timeValue[1]
|
||
|
|
}
|
||
|
|
|
||
|
|
//let estr = this.$refs.fff.timeValue[1]
|
||
|
|
} else {
|
||
|
|
this.formData.searchBeginTime = this.$refs.fyf.timeValue[0]
|
||
|
|
this.formData.searchEndTime = this.$refs.fyf.timeValue[1]
|
||
|
|
}
|
||
|
|
var data = window.sessionStorage.getItem('Info')
|
||
|
|
data = eval('(' + data + ')')
|
||
|
|
this.formData.deptIndex = data.deptId
|
||
|
|
this.changeName2 = this.changeName
|
||
|
|
|
||
|
|
//this.eachartfalg = false
|
||
|
|
//this.formData.type = this.Indextype
|
||
|
|
api.deptSubstationRelations(this.formData).then(res => {
|
||
|
|
if (res.code == 'A0000') {
|
||
|
|
this.listcard = res.data
|
||
|
|
this.tableData = res.data
|
||
|
|
this.table = true
|
||
|
|
this.konzhi = false
|
||
|
|
var xarr = []
|
||
|
|
var yarr = []
|
||
|
|
res.data.forEach(element => {
|
||
|
|
xarr.push(element.name)
|
||
|
|
|
||
|
|
yarr.push(element.data)
|
||
|
|
})
|
||
|
|
this.xdata = xarr
|
||
|
|
for (var i = 0; i < yarr.length; i++) {
|
||
|
|
if (yarr[i] == 3.14159) {
|
||
|
|
yarr[i] = 0.05
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// for (var i = 0; i < yarr.length; i++) {
|
||
|
|
// if (yarr[i] >= 0 && yarr[i] < 1) {
|
||
|
|
// yarr[i] = (yarr[i] / 1) * 20;
|
||
|
|
// } else if (yarr[i] >= 1 && yarr[i] < 1.2) {
|
||
|
|
// yarr[i] = (yarr[i] / 1.2) * 40;
|
||
|
|
// } else if (yarr[i] >= 1.2 && yarr[i] < 1.6) {
|
||
|
|
// yarr[i] = (yarr[i] / 1.6) * 60;
|
||
|
|
// } else if (yarr[i] >= 1.6 && yarr[i] < 2) {
|
||
|
|
// yarr[i] = (yarr[i] / 2) * 80;
|
||
|
|
// } else if (yarr[i] > 2) {
|
||
|
|
// yarr[i] = (yarr[i] / 2) * 100;
|
||
|
|
// } else if (yarr[i] == 0) {
|
||
|
|
// yarr[i] = 1;
|
||
|
|
// } else if (yarr[i] == 3.14159) {
|
||
|
|
// yarr[i] = 2;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
this.ydata = yarr
|
||
|
|
|
||
|
|
// this.eachartfalg = true
|
||
|
|
}
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.child.evaluation()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
//alert('父组件条件查询触发方法'+ data)
|
||
|
|
},
|
||
|
|
handleClick(tab, event) {
|
||
|
|
// this.$nextTick(()=> {
|
||
|
|
// this.$refs.child.dataintegrity()
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
tenlineData1() {
|
||
|
|
const echarts = require('echarts')
|
||
|
|
var myChartes = echarts.init(document.getElementById('tenlineechart'))
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
//text: this.title,
|
||
|
|
subtext: '单位(污染值)'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: function (params) {
|
||
|
|
var tips = ''
|
||
|
|
tips += '<span style="font-weight:bold;color:#0099CC">' + params[0].name + '</span></br/>'
|
||
|
|
for (var i = 0; i < params.length; i++) {
|
||
|
|
if (params[i].value == 2) {
|
||
|
|
tips += params[i].seriesName + ':暂无数据<br/>'
|
||
|
|
} else {
|
||
|
|
if (params[i].value > 0 && params[i].value <= 20 && params[i].value !== 1) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 1) / 20 + '<br/>'
|
||
|
|
} else if (params[i].value > 20 && params[i].value <= 40) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 1.2) / 40 + '<br/>'
|
||
|
|
} else if (params[i].value > 40 && params[i].value <= 60) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 1.6) / 60 + '<br/>'
|
||
|
|
} else if (params[i].value > 60 && params[i].value <= 80) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 2) / 80 + '<br/>'
|
||
|
|
} else if (params[i].value > 80 && params[i].value <= 100) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 2) / 100 + '<br/>'
|
||
|
|
} else if (params[i].value > 100) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 2) / 100 + '<br/>'
|
||
|
|
} else if (params[i].value == 1) {
|
||
|
|
tips += params[i].seriesName + ':' + (params[i].value * 0) / 20 + '<br/>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return tips
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
data: this.xdata1,
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
alignWithLabel: true
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
symbol: ['none', 'arrow']
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
fontFamily: 'dinproRegular',
|
||
|
|
color: '#000'
|
||
|
|
},
|
||
|
|
rotate: 39
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
feature: {
|
||
|
|
//restore: {},
|
||
|
|
mark: { show: true }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
//name: '单位:状态',
|
||
|
|
type: 'value',
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#00'
|
||
|
|
},
|
||
|
|
// 这里重新定义就可以
|
||
|
|
formatter: function (value, index) {
|
||
|
|
var texts = []
|
||
|
|
if (value === 20) {
|
||
|
|
texts.push('1级')
|
||
|
|
} else if (value === 40) {
|
||
|
|
texts.push('2级')
|
||
|
|
} else if (value === 60) {
|
||
|
|
texts.push('3级')
|
||
|
|
} else if (value === 80) {
|
||
|
|
texts.push('4级')
|
||
|
|
} else if (value === 100) {
|
||
|
|
texts.push('5级')
|
||
|
|
}
|
||
|
|
return texts
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
symbol: ['none', 'arrow']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '数值',
|
||
|
|
barMaxWidth: 45,
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
// 随机显示
|
||
|
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||
|
|
|
||
|
|
// 定制显示（按顺序）
|
||
|
|
color: function (params) {
|
||
|
|
if (params.value > 100) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: zdContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (params.value < 100 && params.value > 80) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: zdContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (60 < params.value && params.value <= 80) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: centerContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (40 < params.value && params.value <= 60) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: qdContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (20 < params.value && params.value <= 40) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: qwContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (0 < params.value && params.value <= 20 && params.value !== 2) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: noContaminated
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
} else if (params.value == 2) {
|
||
|
|
return new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#999999'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
markLine: {
|
||
|
|
silent: false,
|
||
|
|
symbol: 'circle',
|
||
|
|
lineStyle: {
|
||
|
|
color: 'red',
|
||
|
|
width: 1
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
name: '等级:1级无污染',
|
||
|
|
yAxis: 20,
|
||
|
|
lineStyle: {
|
||
|
|
color: noContaminated
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
position: 'middle',
|
||
|
|
formatter: '{b}',
|
||
|
|
textStyle: {
|
||
|
|
color: noContaminated
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '等级:2级轻微污染',
|
||
|
|
yAxis: 40,
|
||
|
|
lineStyle: {
|
||
|
|
color: qwContaminated
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
position: 'middle',
|
||
|
|
formatter: '{b}',
|
||
|
|
textStyle: {
|
||
|
|
color: qwContaminated
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '等级:3级轻度污染',
|
||
|
|
yAxis: 60,
|
||
|
|
lineStyle: {
|
||
|
|
color: qdContaminated
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
position: 'middle',
|
||
|
|
formatter: '{b}',
|
||
|
|
textStyle: {
|
||
|
|
color: qdContaminated
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '等级:4级中度污染',
|
||
|
|
yAxis: 80,
|
||
|
|
lineStyle: {
|
||
|
|
color: centerContaminated
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
position: 'middle',
|
||
|
|
formatter: '{b}',
|
||
|
|
textStyle: {
|
||
|
|
color: centerContaminated
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '等级:5级重度污染',
|
||
|
|
yAxis: 100,
|
||
|
|
lineStyle: {
|
||
|
|
color: zdContaminated
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
position: 'middle',
|
||
|
|
formatter: '{b}',
|
||
|
|
textStyle: {
|
||
|
|
color: zdContaminated
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
data: this.ydata1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
myChartes.setOption(option)
|
||
|
|
window.echartsArr.push(myChartes)
|
||
|
|
setTimeout(() => {
|
||
|
|
myChartes.resize()
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this.$destroy()
|
||
|
|
this.qy = false
|
||
|
|
this.timevalue = null
|
||
|
|
this.pickerOptions = null
|
||
|
|
this.timevalue = null
|
||
|
|
this.voltageoption = null
|
||
|
|
this.stationData = null
|
||
|
|
this.lineData = null
|
||
|
|
this.fanweioption = null
|
||
|
|
this.fanweioption = null
|
||
|
|
this.copentoption = null
|
||
|
|
this.panindexOptions = null
|
||
|
|
this.classificationData = null
|
||
|
|
this.formData = null
|
||
|
|
this.listcard = null
|
||
|
|
this.tableData = null
|
||
|
|
this.xdata1 = null
|
||
|
|
this.ydata1 = null
|
||
|
|
window.gc()
|
||
|
|
},
|
||
|
|
destroyed() {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
@import url('../../../styles/common.less');
|
||
|
|
|
||
|
|
.wr {
|
||
|
|
margin-left: 0%;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zd {
|
||
|
|
background: #ff3300;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zzd {
|
||
|
|
background: #ff9900;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qd {
|
||
|
|
background: #ffcc00;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qw {
|
||
|
|
background: #3399ff;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wd {
|
||
|
|
background: #339933;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ws {
|
||
|
|
background: #999999;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-car3 {
|
||
|
|
/* height: 80vh; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.conent {
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-purple-dark {
|
||
|
|
background: #d3dce6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-purple {
|
||
|
|
background: #d3dce6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-purple-light {
|
||
|
|
/* background: #e5e9f2; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-content {
|
||
|
|
border-radius: 4px;
|
||
|
|
min-height: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-top {
|
||
|
|
border-style: solid hidden hidden hidden;
|
||
|
|
color: rgb(7, 131, 161);
|
||
|
|
border: 1.5px solid rgb(7, 131, 161);
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-card__header {
|
||
|
|
padding: 0px 0px;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||
|
|
background-color: #79878769;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .demo-form-inline {
|
||
|
|
height: 46px;
|
||
|
|
overflow-y: hidden !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-dialog .el-dialog__body {
|
||
|
|
max-height: 70vh;
|
||
|
|
padding: 10px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xshou {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 隐藏滚动条 */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
display: block;
|
||
|
|
width: 8px !important;
|
||
|
|
}
|
||
|
|
</style>
|