<template>
|
<el-card shadow="never" class="aui-card--fill">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="浅槽分选307" name="tab1">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="qcfx307.anyData" ref="qcfx307AnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="qcfx307.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="qcfx307.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="qcfx307.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="qcfx307.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="qcfx307.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="qcfx307.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="qcfx307.hjt.loading" @click="searchDataQc307()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--合介桶桶位-->
|
<div class="chart-cont" v-loading="qcfx307.hjt.loading">
|
<div id="chartQcfx307Hjt" class="chart-line"></div>
|
</div>
|
<!--稀介桶桶位-->
|
<div class="chart-cont" v-loading="qcfx307.xjt.loading">
|
<div id="chartQcfx307Xjt" class="chart-line"></div>
|
</div>
|
<!--煤泥桶桶位-->
|
<div class="chart-cont" v-loading="qcfx307.mnt.loading">
|
<div id="chartQcfx307Mnt" class="chart-line"></div>
|
</div>
|
<!--磁性物含量-->
|
<div class="chart-cont" v-loading="qcfx307.cxw.loading">
|
<div id="chartQcfx307Cxw" class="chart-line"></div>
|
</div>
|
<!--合介密度-->
|
<div class="chart-cont" v-loading="qcfx307.hjmd.loading">
|
<div id="chartQcfx307Hjmd" class="chart-line"></div>
|
</div>
|
<!--分流阀开度-->
|
<div class="chart-cont" v-loading="qcfx307.flf.loading">
|
<div id="chartQcfx307Flf" class="chart-line"></div>
|
</div>
|
<!--加水阀开度-->
|
<div class="chart-cont" v-loading="qcfx307.jsf.loading">
|
<div id="chartQcfx307Jsf" class="chart-line"></div>
|
</div>
|
<!--灰分-->
|
<div class="chart-cont" v-loading="qcfx307.hf.loading">
|
<div id="chartQcfx307Hf" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="浅槽分选308" name="tab2">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="qcfx308.anyData" ref="qcfx308AnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="qcfx308.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="qcfx308.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="qcfx308.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="qcfx308.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="qcfx308.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="qcfx308.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="qcfx308.hjt.loading" @click="searchDataQc308()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--合介桶桶位-->
|
<div class="chart-cont" v-loading="qcfx308.hjt.loading">
|
<div id="chartQcfx308Hjt" class="chart-line"></div>
|
</div>
|
<!--稀介桶桶位-->
|
<div class="chart-cont" v-loading="qcfx308.xjt.loading">
|
<div id="chartQcfx308Xjt" class="chart-line"></div>
|
</div>
|
<!--煤泥桶桶位-->
|
<div class="chart-cont" v-loading="qcfx308.mnt.loading">
|
<div id="chartQcfx308Mnt" class="chart-line"></div>
|
</div>
|
<!--磁性物含量-->
|
<div class="chart-cont" v-loading="qcfx308.cxw.loading">
|
<div id="chartQcfx308Cxw" class="chart-line"></div>
|
</div>
|
<!--合介密度-->
|
<div class="chart-cont" v-loading="qcfx308.hjmd.loading">
|
<div id="chartQcfx308Hjmd" class="chart-line"></div>
|
</div>
|
<!--分流阀开度-->
|
<div class="chart-cont" v-loading="qcfx308.flf.loading">
|
<div id="chartQcfx308Flf" class="chart-line"></div>
|
</div>
|
<!--加水阀开度-->
|
<div class="chart-cont" v-loading="qcfx308.jsf.loading">
|
<div id="chartQcfx308Jsf" class="chart-line"></div>
|
</div>
|
<!--灰分-->
|
<div class="chart-cont" v-loading="qcfx308.hf.loading">
|
<div id="chartQcfx308Hf" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="旋流分选3318" name="tab3">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="xlfx3318.anyData" ref="xlfx3318AnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="xlfx3318.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="xlfx3318.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="xlfx3318.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="xlfx3318.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="xlfx3318.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="xlfx3318.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="xlfx3318.hlt.loading" @click="searchDataXlfx3318()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--混料桶桶位-->
|
<div class="chart-cont" v-loading="xlfx3318.hlt.loading">
|
<div id="chartXlfx3318Hlt" class="chart-line"></div>
|
</div>
|
<!--合介桶液位-->
|
<div class="chart-cont" v-loading="xlfx3318.hjt.loading">
|
<div id="chartXlfx3318Hjt" class="chart-line"></div>
|
</div>
|
<!--稀介桶液位-->
|
<div class="chart-cont" v-loading="xlfx3318.xjt.loading">
|
<div id="chartXlfx3318Xjt" class="chart-line"></div>
|
</div>
|
<!--煤泥桶桶位-->
|
<div class="chart-cont" v-loading="xlfx3318.mnt.loading">
|
<div id="chartXlfx3318Mnt" class="chart-line"></div>
|
</div>
|
|
<!--旋流器压力-->
|
<div class="chart-cont" v-loading="xlfx3318.xlqyl.loading">
|
<div id="chartXlfx3318Xlqyl" class="chart-line"></div>
|
</div>
|
<!--磁性物含量-->
|
<div class="chart-cont" v-loading="xlfx3318.cxw.loading">
|
<div id="chartXlfx3318Cxw" class="chart-line"></div>
|
</div>
|
<!--合介密度-->
|
<div class="chart-cont" v-loading="xlfx3318.hjmd.loading">
|
<div id="chartXlfx3318Hjmd" class="chart-line"></div>
|
</div>
|
<!--分流阀开度-->
|
<div class="chart-cont" v-loading="xlfx3318.flf.loading">
|
<div id="chartXlfx3318Flf" class="chart-line"></div>
|
</div>
|
<!--排水泵频率-->
|
<div class="chart-cont" v-loading="xlfx3318.psb.loading">
|
<div id="chartXlfx3318Psb" class="chart-line"></div>
|
</div>
|
<!--加介阀开度-->
|
<div class="chart-cont" v-loading="xlfx3318.jjf.loading">
|
<div id="chartXlfx3318Jjf" class="chart-line"></div>
|
</div>
|
<!--加水阀开度-->
|
<div class="chart-cont" v-loading="xlfx3318.jsf.loading">
|
<div id="chartXlfx3318Jsf" class="chart-line"></div>
|
</div>
|
<!--灰分-->
|
<div class="chart-cont" v-loading="xlfx3318.hf.loading">
|
<div id="chartXlfx3318Hf" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="旋流分选3319" name="tab4">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="xlfx3319.anyData" ref="xlfx3319AnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="xlfx3319.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="xlfx3319.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="xlfx3319.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="xlfx3319.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="xlfx3319.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="xlfx3319.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="xlfx3319.hf.loading" @click="searchDataXlfx3319()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--混料桶桶位-->
|
<div class="chart-cont" v-loading="xlfx3319.hlt.loading">
|
<div id="chartXlfx3319Hlt" class="chart-line"></div>
|
</div>
|
<!--合介桶液位-->
|
<div class="chart-cont" v-loading="xlfx3319.hjt.loading">
|
<div id="chartXlfx3319Hjt" class="chart-line"></div>
|
</div>
|
<!--稀介桶液位-->
|
<div class="chart-cont" v-loading="xlfx3319.xjt.loading">
|
<div id="chartXlfx3319Xjt" class="chart-line"></div>
|
</div>
|
<!--煤泥桶桶位-->
|
<div class="chart-cont" v-loading="xlfx3319.mnt.loading">
|
<div id="chartXlfx3319Mnt" class="chart-line"></div>
|
</div>
|
|
<!--旋流器压力-->
|
<div class="chart-cont" v-loading="xlfx3319.xlqyl.loading">
|
<div id="chartXlfx3319Xlqyl" class="chart-line"></div>
|
</div>
|
<!--磁性物含量-->
|
<div class="chart-cont" v-loading="xlfx3319.cxw.loading">
|
<div id="chartXlfx3319Cxw" class="chart-line"></div>
|
</div>
|
<!--合介密度-->
|
<div class="chart-cont" v-loading="xlfx3319.hjmd.loading">
|
<div id="chartXlfx3319Hjmd" class="chart-line"></div>
|
</div>
|
<!--分流阀开度-->
|
<div class="chart-cont" v-loading="xlfx3319.flf.loading">
|
<div id="chartXlfx3319Flf" class="chart-line"></div>
|
</div>
|
<!--排水泵频率-->
|
<div class="chart-cont" v-loading="xlfx3319.psb.loading">
|
<div id="chartXlfx3319Psb" class="chart-line"></div>
|
</div>
|
<!--加介阀开度-->
|
<div class="chart-cont" v-loading="xlfx3319.jjf.loading">
|
<div id="chartXlfx3319Jjf" class="chart-line"></div>
|
</div>
|
<!--加水阀开度-->
|
<div class="chart-cont" v-loading="xlfx3319.jsf.loading">
|
<div id="chartXlfx3319Jsf" class="chart-line"></div>
|
</div>
|
<!--灰分-->
|
<div class="chart-cont" v-loading="xlfx3319.hf.loading">
|
<div id="chartXlfx3319Hf" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="浅槽浓缩" name="tab5">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="qcns.anyData" ref="qcnsAnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="qcns.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="qcns.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="qcns.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="qcns.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="qcns.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="qcns.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="qcns.rlnd.loading" @click="searchDataQcns">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--浓缩池入料浓度-->
|
<div class="chart-cont" v-loading="qcns.rlnd.loading">
|
<div id="chartQcnsRlnd" class="chart-line"></div>
|
</div>
|
<!--浓缩池入料流量-->
|
<div class="chart-cont" v-loading="qcns.rlld.loading">
|
<div id="chartQcnsRlll" class="chart-line"></div>
|
</div>
|
<!--加药流量-->
|
<div class="chart-cont" v-loading="qcns.jyll.loading">
|
<div id="chartQcnsJyll" class="chart-line"></div>
|
</div>
|
<!--循环水池浊度-->
|
<div class="chart-cont" v-loading="qcns.sczd.loading">
|
<div id="chartQcnsSczd" class="chart-line"></div>
|
</div>
|
<!--浓缩池出料浓度-->
|
<div class="chart-cont" v-loading="qcns.clnd.loading">
|
<div id="chartQcnsClnd" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="旋流浓缩" name="tab6">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="xlns.anyData" ref="xlnsAnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="xlns.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="xlns.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="xlns.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="xlns.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="xlns.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="xlns.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="xlns.rlnd.loading" @click="searchDataXlns()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--浓缩池入料浓度-->
|
<div class="chart-cont" v-loading="xlns.rlnd.loading">
|
<div id="chartXlnsRlnd" class="chart-line"></div>
|
</div>
|
<!--浓缩池入料流量-->
|
<div class="chart-cont" v-loading="xlns.rlld.loading">
|
<div id="chartXlnsRlld" class="chart-line"></div>
|
</div>
|
<!--加药流量-->
|
<div class="chart-cont" v-loading="xlns.jyll.loading">
|
<div id="chartXlnsJyll" class="chart-line"></div>
|
</div>
|
<!--循环水池浊度-->
|
<div class="chart-cont" v-loading="xlns.sczd.loading">
|
<div id="chartXlnsSczd" class="chart-line"></div>
|
</div>
|
<!--浓缩池出料浓度-->
|
<div class="chart-cont" v-loading="xlns.clnd.loading">
|
<div id="chartXlnsClnd" class="chart-line"></div>
|
</div>
|
<!--污泥厚度-->
|
<div class="chart-cont" v-loading="xlns.wnhd.loading">
|
<div id="chartNSwnhd" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="旋流压滤" name="tab7">
|
<el-row type="flex" justify="space-around">
|
<el-col :span="8">
|
<div class="any-card border-down">
|
<el-form :model="xlyl.anyData" ref="xlylAnyData" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="诊断结果" prop="alarmInfo">
|
<el-input v-model="xlyl.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="诊断时间" prop="anyTime">
|
<el-input v-model="xlyl.anyData.anyTime" readonly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-divider content-position="left">诊断记录</el-divider>
|
<any-report :procCode="xlyl.anyData.code"></any-report>
|
</div>
|
</el-col>
|
<el-col :span="16">
|
<el-form :inline="true" :model="xlyl.dataForm" label-width="100px">
|
<el-form-item>
|
<el-date-picker
|
v-model="xlyl.dataForm.startDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="xlyl.dataForm.endDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button :loading="xlyl.rlc.loading" @click="searchDataXlyl()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="scrollable-container border-down">
|
<!--入料池液位-->
|
<div class="chart-cont" v-loading="xlyl.rlc.loading">
|
<div id="chartXlylRlc" class="chart-line"></div>
|
</div>
|
<!--皮带秤瞬时量-->
|
<div class="chart-cont" v-loading="xlyl.pdc.loading">
|
<div id="chartXlylPdc" class="chart-line"></div>
|
</div>
|
<!--入料泵运行状态-->
|
<div class="chart-cont" v-loading="xlyl.rlb.loading">
|
<div id="chartXlylRlb" class="chart-line"></div>
|
</div>
|
<!--刮板机运行状态-->
|
<div class="chart-cont" v-loading="xlyl.gbj.loading">
|
<div id="chartXlylGbj" class="chart-line"></div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</template>
|
<script>
|
import {getSeriesData} from '@/utils/mathUtils'
|
import AnyReport from './components/report'
|
|
export default {
|
components: {
|
AnyReport
|
},
|
data() {
|
return {
|
activeName: 'tab1',
|
qcfx307: {
|
loading: false,
|
anyData: {
|
code: 'C01',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
hjt: {
|
loading: false,
|
chartCode: 'chartQcfx307Hjt',
|
chartName: '合介桶桶位',
|
codes: ['M0000200012', 'M0000200015', 'M0000200016']
|
},
|
xjt: {
|
loading: false,
|
chartCode: 'chartQcfx307Xjt',
|
chartName: '稀介桶桶位',
|
codes: ['M0000200013', 'M0000200017', 'M0000200018']
|
},
|
mnt: {
|
loading: false,
|
chartCode: 'chartQcfx307Mnt',
|
chartName: '煤泥桶桶位',
|
codes: ['M0000200014', 'M0000200019', 'M0000200020']
|
},
|
cxw: {
|
loading: false,
|
chartCode: 'chartQcfx307Cxw',
|
chartName: '磁性物含量',
|
codes: ['M0000200021', 'M0000200022']
|
},
|
hjmd: {
|
loading: false,
|
chartCode: 'chartQcfx307Hjmd',
|
chartName: '合介密度',
|
codes: ['M0000200023', 'M0000200024']
|
},
|
flf: {
|
loading: false,
|
chartCode: 'chartQcfx307Flf',
|
chartName: '分流阀开度',
|
codes: ['M0000200025']
|
},
|
jsf: {
|
loading: false,
|
chartCode: 'chartQcfx307Jsf',
|
chartName: '加水阀开度',
|
codes: ['M0000200026', 'M0000200027', 'M0000200028', 'M0000200029']
|
},
|
hf: {
|
loading: false,
|
chartCode: 'chartQcfx307Hf',
|
chartName: '灰分',
|
codes: ['M0000100020', 'M0000200007']
|
},
|
},
|
qcfx308: {
|
loading: false,
|
anyData: {
|
code: 'C02',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
hjt: {
|
loading: false,
|
chartCode: 'chartQcfx308Hjt',
|
chartName: '合介桶桶位',
|
codes: ['M0000200030', 'M0000200031', 'M0000200032']
|
},
|
xjt: {
|
loading: false,
|
chartCode: 'chartQcfx308Xjt',
|
chartName: '稀介桶桶位',
|
codes: ['M0000200033', 'M0000200034', 'M0000200035']
|
},
|
mnt: {
|
loading: false,
|
chartCode: 'chartQcfx308Mnt',
|
chartName: '煤泥桶桶位',
|
codes: ['M0000200014', 'M0000200019', 'M0000200020']
|
},
|
cxw: {
|
loading: false,
|
chartCode: 'chartQcfx308Cxw',
|
chartName: '磁性物含量',
|
codes: ['M0000200036', 'M0000200037']
|
},
|
hjmd: {
|
loading: false,
|
chartCode: 'chartQcfx308Hjmd',
|
chartName: '合介密度',
|
codes: ['M0000200038', 'M0000200039']
|
},
|
flf: {
|
loading: false,
|
chartCode: 'chartQcfx308Flf',
|
chartName: '分流阀开度',
|
codes: ['M0000200040']
|
},
|
jsf: {
|
loading: false,
|
chartCode: 'chartQcfx308Jsf',
|
chartName: '加水阀开度',
|
codes: ['M0000200041', 'M0000200042', 'M0000200028', 'M0000200043']
|
},
|
hf: {
|
loading: false,
|
chartCode: 'chartQcfx308Hf',
|
chartName: '灰分',
|
codes: ['M0000100020', 'M0000200007']
|
},
|
},
|
xlfx3318: {
|
loading: false,
|
anyData: {
|
code: 'C03',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
hlt: {
|
loading: false,
|
chartCode: 'chartXlfx3318Hlt',
|
chartName: '混料桶桶位',
|
codes: ['M0000200044', 'M0000200045', 'M0000200046']
|
},
|
hjt: {
|
loading: false,
|
chartCode: 'chartXlfx3318Hjt',
|
chartName: '合介桶液位',
|
codes: ['M0000200047', 'M0000200048', 'M0000200049']
|
},
|
xjt: {
|
loading: false,
|
chartCode: 'chartXlfx3318Xjt',
|
chartName: '稀介桶液位',
|
codes: ['M0000200050', 'M0000200051', 'M0000200052']
|
},
|
mnt: {
|
loading: false,
|
chartCode: 'chartXlfx3318Mnt',
|
chartName: '煤泥桶桶位',
|
codes: ['M0000200053', 'M0000200054', 'M0000200055']
|
},
|
xlqyl: {
|
loading: false,
|
chartCode: 'chartXlfx3318Xlqyl',
|
chartName: '旋流器压力',
|
codes: ['M0000200056', 'M0000200057']
|
},
|
cxw: {
|
loading: false,
|
chartCode: 'chartXlfx3318Cxw',
|
chartName: '磁性物含量',
|
codes: ['M0000200058', 'M0000200059']
|
},
|
hjmd: {
|
loading: false,
|
chartCode: 'chartXlfx3318Hjmd',
|
chartName: '合介密度',
|
codes: ['M0000200060', 'M0000200061']
|
},
|
flf: {
|
loading: false,
|
chartCode: 'chartXlfx3318Flf',
|
chartName: '分流阀开度',
|
codes: ['M0000200062', 'M0000200063']
|
},
|
psb: {
|
loading: false,
|
chartCode: 'chartXlfx3318Psb',
|
chartName: '排水泵频率',
|
codes: ['M0000200064', 'M0000200065', 'M0000200068', 'M0000200069']
|
},
|
jjf: {
|
loading: false,
|
chartCode: 'chartXlfx3318Jjf',
|
chartName: '加介阀开度',
|
codes: ['M0000200066']
|
},
|
jsf: {
|
loading: false,
|
chartCode: 'chartXlfx3318Jsf',
|
chartName: '加水阀开度',
|
codes: ['M0000200067', 'M0000200070']
|
},
|
hf: {
|
loading: false,
|
chartCode: 'chartXlfx3318Hf',
|
chartName: '灰分',
|
codes: ['M0000200071', 'M0000200006']
|
},
|
},
|
xlfx3319: {
|
loading: false,
|
anyData: {
|
code: 'C04',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
hlt: {
|
loading: false,
|
chartCode: 'chartXlfx3319Hlt',
|
chartName: '混料桶桶位',
|
codes: ['M0000200072', 'M0000200073', 'M0000200074']
|
},
|
hjt: {
|
loading: false,
|
chartCode: 'chartXlfx3319Hjt',
|
chartName: '合介桶液位',
|
codes: ['M0000200075', 'M0000200076', 'M0000200077']
|
},
|
xjt: {
|
loading: false,
|
chartCode: 'chartXlfx3319Xjt',
|
chartName: '稀介桶液位',
|
codes: ['M0000200078', 'M0000200079', 'M0000200080']
|
},
|
mnt: {
|
loading: false,
|
chartCode: 'chartXlfx3319Mnt',
|
chartName: '煤泥桶桶位',
|
codes: ['M0000200081', 'M0000200082', 'M0000200083']
|
},
|
xlqyl: {
|
loading: false,
|
chartCode: 'chartXlfx3319Xlqyl',
|
chartName: '旋流器压力',
|
codes: ['M0000200084', 'M0000200085']
|
},
|
cxw: {
|
loading: false,
|
chartCode: 'chartXlfx3319Cxw',
|
chartName: '磁性物含量',
|
codes: ['M0000200086', 'M0000200087']
|
},
|
hjmd: {
|
loading: false,
|
chartCode: 'chartXlfx3319Hjmd',
|
chartName: '合介密度',
|
codes: ['M0000200088', 'M0000200089']
|
},
|
flf: {
|
loading: false,
|
chartCode: 'chartXlfx3319Flf',
|
chartName: '分流阀开度',
|
codes: ['M0000200090', 'M0000200091']
|
},
|
psb: {
|
loading: false,
|
chartCode: 'chartXlfx3319Psb',
|
chartName: '排水泵频率',
|
codes: ['M0000200092', 'M0000200093', 'M0000200094', 'M0000200095']
|
},
|
jjf: {
|
loading: false,
|
chartCode: 'chartXlfx3319Jjf',
|
chartName: '加介阀开度',
|
codes: ['M0000200096']
|
},
|
jsf: {
|
loading: false,
|
chartCode: 'chartXlfx3319Jsf',
|
chartName: '加水阀开度',
|
codes: ['M0000200067', 'M0000200096']
|
},
|
hf: {
|
loading: false,
|
chartCode: 'chartXlfx3319Hf',
|
chartName: '灰分',
|
codes: ['M0000200071', 'M0000200006']
|
},
|
},
|
qcns: {
|
loading: false,
|
anyData: {
|
code: 'C05',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
rlnd: {
|
loading: false,
|
chartCode: 'chartQcnsRlnd',
|
chartName: '浓缩池入料浓度',
|
codes: ['M0000100106']
|
},
|
rlld: {
|
loading: false,
|
chartCode: 'chartQcnsRlll',
|
chartName: '浓缩池入料流量',
|
codes: ['M0000100105']
|
},
|
jyll: {
|
loading: false,
|
chartCode: 'chartQcnsJyll',
|
chartName: '加药流量',
|
codes: ['M0000100123', 'M0000100124']
|
},
|
sczd: {
|
loading: false,
|
chartCode: 'chartQcnsSczd',
|
chartName: '循环水池浊度',
|
codes: ['M0000100109', 'M0000101081', 'M0000100115', 'M0000101084']
|
},
|
clnd: {
|
loading: false,
|
chartCode: 'chartQcnsClnd',
|
chartName: '浓缩池出料浓度',
|
codes: ['M0000100108', 'M0000101082', 'M0000100114', 'M0000101085']
|
},
|
wnhd: {
|
loading: false,
|
chartCode: 'chartQcnsWnhd',
|
chartName: '浓缩池污泥厚度',
|
codes: ['M0000100110', 'M0000101083', 'M0000100116', 'M0000101086']
|
}
|
},
|
xlns: {
|
loading: false,
|
anyData: {
|
code: 'C06',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
rlnd: {
|
loading: false,
|
chartCode: 'chartXlnsRlnd',
|
chartName: '浓缩池入料浓度',
|
codes: ['M0000100118']
|
},
|
rlld: {
|
loading: false,
|
chartCode: 'chartXlnsRlld',
|
chartName: '浓缩池入料流量',
|
codes: ['M0000100117']
|
},
|
jyll: {
|
loading: false,
|
chartCode: 'chartXlnsJyll',
|
chartName: '加药流量',
|
codes: ['M0000100139', 'M0000100140']
|
},
|
sczd: {
|
loading: false,
|
chartCode: 'chartXlnsSczd',
|
chartName: '循环水池浊度',
|
codes: ['M0000100121', 'M0000101092']
|
},
|
clnd: {
|
loading: false,
|
chartCode: 'chartXlnsClnd',
|
chartName: '浓缩池出料浓度',
|
codes: ['M0000100120', 'M0000101093']
|
},
|
wnhd: {
|
loading: false,
|
chartCode: 'chartNSwnhd',
|
chartName: '污泥厚度',
|
codes: ['M0000100122', 'M0000101094']
|
}
|
},
|
xlyl: {
|
loading: false,
|
anyData: {
|
code: 'C07',
|
anyTime: '',
|
alarmInfo: '',
|
},
|
dataForm: {
|
startDate: '',
|
endDate: '',
|
},
|
rlc: {
|
loading: false,
|
chartCode: 'chartXlylRlc',
|
chartName: '入料池液位',
|
codes: ['M0000100426']
|
},
|
pdc: {
|
loading: false,
|
chartCode: 'chartXlylPdc',
|
chartName: '皮带秤瞬时量',
|
codes: ['M0000100015']
|
},
|
rlb: {
|
loading: false,
|
chartCode: 'chartXlylRlb',
|
chartName: '入料泵运行状态',
|
codes: ['M0000100151', 'M0000100153', 'M0000100155', 'M0000100157', 'M0000100159']
|
},
|
gbj: {
|
loading: false,
|
chartCode: 'chartXlylGbj',
|
chartName: '刮板机运行状态',
|
codes: ['M0000100171', 'M0000100173', 'M0000100175', 'M0000100177', 'M0000100179']
|
}
|
}
|
}
|
},
|
mounted() {
|
this.init()
|
this.searchDataQc307()
|
},
|
methods: {
|
init() {
|
this.getCard(this.qcfx307.anyData)
|
this.getCard(this.qcfx308.anyData)
|
this.getCard(this.xlfx3318.anyData)
|
this.getCard(this.xlfx3319.anyData)
|
this.getCard(this.qcns.anyData)
|
this.getCard(this.xlns.anyData)
|
this.getCard(this.xlyl.anyData)
|
},
|
|
getCard(anyData) {
|
this.resetFields(anyData)
|
this.$http.get(`/iailab-ntt-model/any/proc-card/code/${anyData.code}`).then(({data: res}) => {
|
if (res.code !== 0) {
|
return this.$message.error(res.msg)
|
}
|
anyData.anyTime = res.data.anyTime
|
anyData.alarmInfo = res.data.alarmInfo
|
}).catch(() => {
|
})
|
|
},
|
searchDataQc307() {
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.hjt)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.xjt)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.mnt)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.cxw)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.hjmd)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.flf)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.jsf)
|
this.getChart(this.qcfx307.dataForm, this.qcfx307.hf)
|
},
|
searchDataQc308() {
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.hjt)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.xjt)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.mnt)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.cxw)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.hjmd)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.flf)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.jsf)
|
this.getChart(this.qcfx308.dataForm, this.qcfx308.hf)
|
},
|
searchDataXlfx3318() {
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hlt)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hjt)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.xjt)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.mnt)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.xlqyl)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.cxw)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hjmd)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.flf)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.psb)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.jjf)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.jsf)
|
this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hf)
|
},
|
searchDataXlfx3319() {
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hlt)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hjt)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.xjt)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.mnt)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.xlqyl)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.cxw)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hjmd)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.flf)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.psb)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.jjf)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.jsf)
|
this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hf)
|
},
|
searchDataQcns() {
|
this.getChart(this.qcns.dataForm, this.qcns.rlnd)
|
this.getChart(this.qcns.dataForm, this.qcns.rlld)
|
this.getChart(this.qcns.dataForm, this.qcns.jyll)
|
this.getChart(this.qcns.dataForm, this.qcns.sczd)
|
this.getChart(this.qcns.dataForm, this.qcns.clnd)
|
this.getChart(this.qcns.dataForm, this.qcns.wnhd)
|
},
|
searchDataXlns() {
|
this.getChart(this.xlns.dataForm, this.xlns.rlnd)
|
this.getChart(this.xlns.dataForm, this.xlns.rlld)
|
this.getChart(this.xlns.dataForm, this.xlns.jyll)
|
this.getChart(this.xlns.dataForm, this.xlns.sczd)
|
this.getChart(this.xlns.dataForm, this.xlns.clnd)
|
this.getChart(this.xlns.dataForm, this.xlns.wnhd)
|
},
|
searchDataXlyl() {
|
this.getChart(this.xlyl.dataForm, this.xlyl.rlc)
|
this.getChart(this.xlyl.dataForm, this.xlyl.pdc)
|
this.getChart(this.xlyl.dataForm, this.xlyl.rlb)
|
this.getChart(this.xlyl.dataForm, this.xlyl.gbj)
|
},
|
getChart(dataForm, chartParam) {
|
let that = this
|
chartParam.loading = true
|
this.$http['post'](`/iailab-ntt-data/api/data/point/chart`, {
|
codes: chartParam.codes,
|
startDate: dataForm.startDate,
|
endDate: dataForm.endDate,
|
}).then(({data: res}) => {
|
chartParam.loading = false
|
if (res.code !== 0) {
|
return this.$message.error(res.msg)
|
}
|
let myChart = this.$echarts.init(document.getElementById(chartParam.chartCode));
|
let seriesData = []
|
if (res.data.series) {
|
res.data.series.forEach(function (item, index) {
|
seriesData.push(
|
{
|
name: item.name,
|
type: 'line',
|
smooth: true,
|
showSymbol: false,
|
data: item.data
|
}
|
)
|
})
|
let option = {
|
title: {
|
text: chartParam.chartName
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: res.data.legend,
|
},
|
grid: {
|
top: '20%',
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: res.data.categories,
|
},
|
yAxis: {
|
type: 'value',
|
position: 'left',
|
offset: 0,
|
name: '',
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: true,
|
onZero: false
|
},
|
axisTick: {show: true},
|
axisLabel: {
|
formatter: '{value}'
|
}
|
},
|
series: seriesData
|
}
|
if (option && typeof option === "object") {
|
myChart.setOption(option);
|
}
|
}
|
})
|
|
},
|
handleClick(tab, event) {
|
let that = this
|
if ('tab1' === tab.name) {
|
setTimeout(function () {
|
that.searchDataQc307()
|
that.getCard(that.qcfx307.anyData)
|
}, 500)
|
} else if ('tab2' === tab.name) {
|
setTimeout(function () {
|
that.searchDataQc308()
|
that.getCard(that.qcfx308.anyData)
|
}, 500)
|
} else if ('tab3' === tab.name) {
|
setTimeout(function () {
|
that.searchDataXlfx3318()
|
that.getCard(that.xlfx3318.anyData)
|
}, 500)
|
} else if ('tab4' === tab.name) {
|
setTimeout(function () {
|
that.searchDataXlfx3319()
|
that.getCard(that.xlfx3319.anyData)
|
}, 500)
|
} else if ('tab5' === tab.name) {
|
setTimeout(function () {
|
that.searchDataQcns()
|
that.getCard(that.qcns.anyData)
|
}, 500)
|
} else if ('tab6' === tab.name) {
|
setTimeout(function () {
|
that.searchDataXlns()
|
that.getCard(that.xlns.anyData)
|
}, 500)
|
} else if ('tab7' === tab.name) {
|
setTimeout(function () {
|
that.searchDataXlyl()
|
that.getCard(that.xlyl.anyData)
|
}, 500)
|
}
|
},
|
resetFields (obj) {
|
for (let key in obj) {
|
if (key === 'id' || key === 'code') {
|
continue
|
}
|
if (obj[key] instanceof Array) {
|
obj[key] = []
|
} else if (obj[key] instanceof Object) {
|
this.resetFields(obj[key])
|
} else {
|
obj[key] = ''
|
}
|
}
|
}
|
}
|
|
}
|
</script>
|
<style scoped>
|
.chart-cont {
|
height: 240px;
|
width: 100%;
|
padding: 0 10px 0 10px;
|
}
|
|
.chart-line {
|
width: 95%;
|
height: 100%;
|
}
|
|
.any-card {
|
width: 90%;
|
margin: 5px;
|
padding: 10px;
|
height: calc(calc(100vh - 48px - 38px - 35px - 110px));
|
}
|
|
.scrollable-container {
|
overflow: auto;
|
width: 100%;
|
height: calc(calc(100vh - 48px - 38px - 35px - 160px));
|
}
|
|
.border-down {
|
border: 1px solid #e2e4e9;
|
}
|
</style>
|