619 lines
18 KiB
Vue
619 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
|||
|
|
<!-- <transition appear>
|
|||
|
|
<div v-show="dd" class="dhys">
|
|||
|
|
<timepicker style="right:0;margin-left: -0.5%;"
|
|||
|
|
:id="id"
|
|||
|
|
@querfromdata="querfromdata"
|
|||
|
|
:interval="interval"
|
|||
|
|
:treenode="treenode"
|
|||
|
|
:tablename="tablename"
|
|||
|
|
:name="name"
|
|||
|
|
:path="path"
|
|||
|
|
:dataTree="dataTree"
|
|||
|
|
></timepicker>
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
-->
|
|||
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|||
|
|
<!-- <div style="display: flex;"> -->
|
|||
|
|
|
|||
|
|
<!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
|
|||
|
|
<el-form-item>
|
|||
|
|
<timepicker
|
|||
|
|
:id="id" ref="timezd"
|
|||
|
|
:interval="interval"
|
|||
|
|
:treenode="treenode"
|
|||
|
|
:tablename="tablename"
|
|||
|
|
:name="name"
|
|||
|
|
:path="path"
|
|||
|
|
:dataTree="dataTree"
|
|||
|
|
></timepicker>
|
|||
|
|
<!-- <el-button class="el-icon-d-arrow-right" type="primary" round @click="timechange">时间选择</el-button> -->
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button @click="querfromdata" type="primary" icon="el-icon-search" >查询</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="text" @click="closeHandle">条件筛选<i :class="!view?'el-icon-arrow-down':'el-icon-arrow-right'"></i></el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- </div>
|
|||
|
|
</div> -->
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<div class='container' id='container'>
|
|||
|
|
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
|||
|
|
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
|||
|
|
<el-form-item v-if="this.quyunames != undefined">
|
|||
|
|
<el-switch
|
|||
|
|
class="tableScopeSwitch"
|
|||
|
|
:active-value="2"
|
|||
|
|
:inactive-value="1"
|
|||
|
|
@change="handleStatusChange"
|
|||
|
|
:active-text="quyuname"
|
|||
|
|
:inactive-text="quyunames"
|
|||
|
|
inactive-color="#007878"
|
|||
|
|
active-color="#666666"
|
|||
|
|
v-model="this.formData.monitorFlag"
|
|||
|
|
>
|
|||
|
|
</el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="统计类型:">
|
|||
|
|
<el-select
|
|||
|
|
v-model="formData.statisticalType"
|
|||
|
|
@change="changeclasss"
|
|||
|
|
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 label="区域选择:">
|
|||
|
|
<el-select
|
|||
|
|
ref="select1"
|
|||
|
|
v-model="deptName"
|
|||
|
|
placeholder="请选择所属部门区域"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option :value="deptIndex" style="height: auto">
|
|||
|
|
<el-tree
|
|||
|
|
ref="tree"
|
|||
|
|
:data="treeData"
|
|||
|
|
node-key="id"
|
|||
|
|
accordion
|
|||
|
|
:default-expanded-keys="idArr"
|
|||
|
|
:props="defaultProps"
|
|||
|
|
@node-click="handleNodeClick"
|
|||
|
|
>
|
|||
|
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
|||
|
|
<span :title="data.name">{{ data.name }}</span>
|
|||
|
|
</span>
|
|||
|
|
</el-tree>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="终端厂家:" >
|
|||
|
|
<el-select
|
|||
|
|
v-model="formData.manufacturer"
|
|||
|
|
multiple
|
|||
|
|
collapse-tags
|
|||
|
|
clearable
|
|||
|
|
placeholder="请选择终端厂家"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in terminaloption"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.name"
|
|||
|
|
:value="{
|
|||
|
|
label: item.name,
|
|||
|
|
value: item.id,
|
|||
|
|
code: item.code,
|
|||
|
|
name: item.name,
|
|||
|
|
id: item.id,
|
|||
|
|
sort: item.sort,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-row :gutter="10">
|
|||
|
|
<el-col :span="24" style="margin-top: 0%">
|
|||
|
|
<el-tabs :style="'height:'+vh"
|
|||
|
|
type="border-card"
|
|||
|
|
v-model="activeName"
|
|||
|
|
@tab-click="handleClick"
|
|||
|
|
>
|
|||
|
|
<el-tab-pane label="终端状态统计表" name="tab1">
|
|||
|
|
|
|||
|
|
<terminalonlineratetable
|
|||
|
|
v-if="activeName == 'tab1'"
|
|||
|
|
:classvalue="classt"
|
|||
|
|
:tableData="tableData"
|
|||
|
|
:loading="loading"
|
|||
|
|
></terminalonlineratetable>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="终端状态统计图" name="tab2">
|
|||
|
|
|
|||
|
|
<!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;"><span>注意:</span><span style="color:#CC0000">{{'在线率<60%'}}红色</span><span style="color:#FFCC33">   {{'60%≤在线率<90%'}}黄色</span><span style="color:#339966">    {{ '在线率≥90%' }}绿色</span></span> -->
|
|||
|
|
<terminalonlinerateechart
|
|||
|
|
v-show="eacjartflag && activeName == 'tab2'"
|
|||
|
|
:loading="loading"
|
|||
|
|
:classvalue="classt"
|
|||
|
|
:timeValue="time"
|
|||
|
|
:timehuanbiValue="ping"
|
|||
|
|
:xdata="xdata"
|
|||
|
|
:ydata1="ydata1"
|
|||
|
|
:ydata2="ydata2"
|
|||
|
|
:ydata3="ydata3"
|
|||
|
|
:ydata4="ydata4"
|
|||
|
|
ref="trem"
|
|||
|
|
></terminalonlinerateechart>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import api1 from "@/api/pollution/pollution";
|
|||
|
|
import timepicker from "../../components/TimePicker/index4";
|
|||
|
|
import { dicData } from "../../../assets/commjs/dictypeData";
|
|||
|
|
import api from "../../../api/integraliy/integraliy";
|
|||
|
|
import terminalonlineratetable from "../../components/terminalonlineratetable";
|
|||
|
|
import terminalonlinerateechart from "../../components/echarts/terminalonlinerateechart";
|
|||
|
|
export default {
|
|||
|
|
name:'terminalstatusstatistics',
|
|||
|
|
components: {
|
|||
|
|
timepicker,
|
|||
|
|
terminalonlineratetable,
|
|||
|
|
terminalonlinerateechart,
|
|||
|
|
},
|
|||
|
|
watch: {},
|
|||
|
|
computed: {},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cu:'',
|
|||
|
|
quyuname: undefined,
|
|||
|
|
quyunames: undefined,
|
|||
|
|
dd:false,
|
|||
|
|
formInline: {},
|
|||
|
|
loading: true,
|
|||
|
|
asideheight: undefined,
|
|||
|
|
|
|||
|
|
eacjartflag: false,
|
|||
|
|
classt: "Power_Network",
|
|||
|
|
tablename: "tab1",
|
|||
|
|
deptIndex: "",
|
|||
|
|
interval: 3,
|
|||
|
|
treeData: [],
|
|||
|
|
idArr: [],
|
|||
|
|
treenode: "",
|
|||
|
|
dataTree: "",
|
|||
|
|
name: "sjwzx",
|
|||
|
|
path: "/harmonic-boot/harmonic/getIntegrityData",
|
|||
|
|
defaultProps: {
|
|||
|
|
children: "children",
|
|||
|
|
label: "name",
|
|||
|
|
},
|
|||
|
|
deptName: "",
|
|||
|
|
formData: {
|
|||
|
|
//后面需要修改
|
|||
|
|
deptIndex: "",
|
|||
|
|
monitorFlag: 2,
|
|||
|
|
powerFlag: 2,
|
|||
|
|
loadType: [],
|
|||
|
|
manufacturer: [],
|
|||
|
|
searchBeginTime: "",
|
|||
|
|
searchEndTime: "",
|
|||
|
|
statisticalType: "",
|
|||
|
|
scale: [],
|
|||
|
|
},
|
|||
|
|
id: 1,
|
|||
|
|
title: "电网拓扑",
|
|||
|
|
xdata: [],
|
|||
|
|
ydata1: [],
|
|||
|
|
ydata2: [],
|
|||
|
|
ydata3: [],
|
|||
|
|
ydata4: [],
|
|||
|
|
classvalue: 0,
|
|||
|
|
activeName: "tab1",
|
|||
|
|
panindexOptions: [],
|
|||
|
|
classificationData: [],
|
|||
|
|
voltageleve1: [],
|
|||
|
|
terminal: [],
|
|||
|
|
interfere: [],
|
|||
|
|
voltageleveloption: [],
|
|||
|
|
terminaloption: [],
|
|||
|
|
interfereoption: [],
|
|||
|
|
periodBeginTime: "",
|
|||
|
|
periodEndTime: "",
|
|||
|
|
timehuanbiValue: [],
|
|||
|
|
tableData: [],
|
|||
|
|
ping: "",
|
|||
|
|
time: "",
|
|||
|
|
vh:null,
|
|||
|
|
view:false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.setHeight()
|
|||
|
|
window.addEventListener('resize', this.setHeight)
|
|||
|
|
|
|||
|
|
let data = window.sessionStorage.getItem("sysData");
|
|||
|
|
let yudata = eval("(" + data + ")");
|
|||
|
|
let str = yudata.dataReport.split("，");
|
|||
|
|
this.quyuname = str[0];
|
|||
|
|
this.quyunames = str[1];
|
|||
|
|
var info = window.sessionStorage.getItem("Info");
|
|||
|
|
info = eval("(" + info + ")");
|
|||
|
|
this.formData.deptIndex = info.deptId;
|
|||
|
|
this.getAreaDept();
|
|||
|
|
this.getclassificationData();
|
|||
|
|
this.getVoltage();
|
|||
|
|
this.getManufacturer();
|
|||
|
|
this.getLoadType();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.querfromdata()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
window.removeEventListener('resize', this.setHeight)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
setHeight() {
|
|||
|
|
this.vh = window.sessionStorage.getItem('appheight') -55+'px';
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
closeHandle(){
|
|||
|
|
if(this.view){
|
|||
|
|
this.view = false
|
|||
|
|
}else{
|
|||
|
|
this.view = true
|
|||
|
|
}
|
|||
|
|
//console.log('关闭和展开');
|
|||
|
|
const dom = document.getElementById('container');
|
|||
|
|
const closeDom = document.getElementsByClassName('close')[0];
|
|||
|
|
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
|||
|
|
dom.className = "container expend";
|
|||
|
|
} else {
|
|||
|
|
dom.className = "container close-container";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
timechange(){
|
|||
|
|
this.dd = true
|
|||
|
|
},
|
|||
|
|
//切换统计类型
|
|||
|
|
changeclasss(val) {
|
|||
|
|
this.cu = val.code;
|
|||
|
|
},
|
|||
|
|
//标签切换
|
|||
|
|
handleClick(tab, event) {
|
|||
|
|
// this.tablename = tab.name
|
|||
|
|
this.activeName = tab.name;
|
|||
|
|
if (tab.name == "tab1") {
|
|||
|
|
this.eacjartflag = false;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.trem.terminalonlinerateechart();
|
|||
|
|
});
|
|||
|
|
} else if (tab.name == "tab2") {
|
|||
|
|
this.eacjartflag = true;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.trem.terminalonlinerateechart();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//部门绑定区域触发区域树节点
|
|||
|
|
handleNodeClick(data, node) {
|
|||
|
|
this.deptName = data.name;
|
|||
|
|
this.$refs.select1.blur();
|
|||
|
|
this.deptId = data.id;
|
|||
|
|
this.formData.deptIndex = data.id;
|
|||
|
|
},
|
|||
|
|
//时间格式转化
|
|||
|
|
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.startTime);
|
|||
|
|
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.endTime);
|
|||
|
|
return timearr;
|
|||
|
|
},
|
|||
|
|
//时间格式转化
|
|||
|
|
formatDate(date) {
|
|||
|
|
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
return y + "-" + m + "-" + d;
|
|||
|
|
},
|
|||
|
|
//2次组件触发事件
|
|||
|
|
querfromdata() {
|
|||
|
|
this.classt = this.cu
|
|||
|
|
//this.closeHandle()
|
|||
|
|
this.dd = false
|
|||
|
|
this.interval = this.$refs.timezd.intervald;
|
|||
|
|
this.loading = true;
|
|||
|
|
this.timeValue = this.$refs.timezd.timeValue;
|
|||
|
|
// this.timehuanbiValue = timehbValue;
|
|||
|
|
|
|||
|
|
// this.periodBeginTime = this.timehuanbiValue[0];
|
|||
|
|
// this.periodEndTime = this.timehuanbiValue[1];
|
|||
|
|
|
|||
|
|
// this.ping = this.periodBeginTime + "至" + this.periodEndTime;
|
|||
|
|
this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
|||
|
|
this.time =
|
|||
|
|
this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
|
|||
|
|
var data = {
|
|||
|
|
deptIndex: this.formData.deptIndex,
|
|||
|
|
loadType: this.formData.loadType,
|
|||
|
|
monitorFlag: this.formData.monitorFlag,
|
|||
|
|
powerFlag: 2,
|
|||
|
|
manufacturer: this.formData.manufacturer,
|
|||
|
|
searchBeginTime: this.formData.searchBeginTime,
|
|||
|
|
searchEndTime: this.formData.searchEndTime,
|
|||
|
|
statisticalType: this.formData.statisticalType,
|
|||
|
|
scale: this.formData.scale,
|
|||
|
|
periodBeginTime: this.periodBeginTime,
|
|||
|
|
periodEndTime: this.periodEndTime,
|
|||
|
|
};
|
|||
|
|
api.getTerminalData(data).then((res) => {
|
|||
|
|
this.eacjartflag = true;
|
|||
|
|
if (res.code == "A0000") {
|
|||
|
|
res.data.forEach((m) => {
|
|||
|
|
m.id = this.guid();
|
|||
|
|
m.children.forEach((n) => {
|
|||
|
|
n.id = this.guid();
|
|||
|
|
n.children.forEach((d) => {
|
|||
|
|
d.id = this.guid();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.tableData = res.data;
|
|||
|
|
this.loading = false;
|
|||
|
|
}
|
|||
|
|
this.gettubiao()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
gettubiao(){
|
|||
|
|
var data = {
|
|||
|
|
deptIndex: this.formData.deptIndex,
|
|||
|
|
loadType: this.formData.loadType,
|
|||
|
|
monitorFlag: this.formData.monitorFlag,
|
|||
|
|
powerFlag: 2,
|
|||
|
|
manufacturer: this.formData.manufacturer,
|
|||
|
|
searchBeginTime: this.formData.searchBeginTime,
|
|||
|
|
searchEndTime: this.formData.searchEndTime,
|
|||
|
|
statisticalType: this.formData.statisticalType,
|
|||
|
|
scale: this.formData.scale,
|
|||
|
|
periodBeginTime: this.periodBeginTime,
|
|||
|
|
periodEndTime: this.periodEndTime,
|
|||
|
|
};
|
|||
|
|
(this.xdata = []),
|
|||
|
|
(this.ydata1 = []),
|
|||
|
|
(this.ydata2 = []),
|
|||
|
|
(this.ydata3 = []),
|
|||
|
|
(this.ydata4 = []);
|
|||
|
|
api.getTerminalDataCensus(data).then((res) => {
|
|||
|
|
this.eacjartflag = true;
|
|||
|
|
if (res.code == "A0000") {
|
|||
|
|
var data = res.data;
|
|||
|
|
var single = [];
|
|||
|
|
if (data.single !== null) {
|
|||
|
|
for (var i = 0; i < data.single.length; i++) {
|
|||
|
|
if (data.single[i] == 3.14159) {
|
|||
|
|
data.single[i] = 0.5;
|
|||
|
|
}
|
|||
|
|
single.push(data.single[i].toFixed(2));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.xdata = res.data.type;
|
|||
|
|
this.ydata1 = res.data.runFlag;
|
|||
|
|
this.ydata2 = res.data.reaFlag;
|
|||
|
|
this.ydata3 = res.data.stopFlag;
|
|||
|
|
this.ydata4 = single;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.trem.terminalonlinerateechart();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//开关触发
|
|||
|
|
handleStatusChange(val) {
|
|||
|
|
this.formData.monitorFlag = val;
|
|||
|
|
//this.fiveTreeData()
|
|||
|
|
},
|
|||
|
|
guid() {
|
|||
|
|
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
|||
|
|
let r = (Math.random() * 16) | 0,
|
|||
|
|
v = c === "x" ? r : (r & 0x3) | 0x8;
|
|||
|
|
return v.toString(16);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//获取区域
|
|||
|
|
async getAreaDept() {
|
|||
|
|
await api.getAreaDept().then((res) => {
|
|||
|
|
if (res.code == "A0000") {
|
|||
|
|
var data = res.data;
|
|||
|
|
this.deptName =res.data[0].name
|
|||
|
|
data.forEach((element) => {
|
|||
|
|
this.idArr.push(element.id);
|
|||
|
|
});
|
|||
|
|
this.treeData = data;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//字典获取数据电压等级
|
|||
|
|
getVoltage() {
|
|||
|
|
var code = "Dev_Voltage_Stand";
|
|||
|
|
this.voltageleveloption = dicData(code, []);
|
|||
|
|
this.formData.scale = this.voltageleveloption;
|
|||
|
|
},
|
|||
|
|
//字典获取数据终端厂家
|
|||
|
|
getManufacturer() {
|
|||
|
|
var code = "Dev_Manufacturers";
|
|||
|
|
this.terminaloption = dicData(code, []);
|
|||
|
|
this.formData.manufacturer = this.terminaloption;
|
|||
|
|
},
|
|||
|
|
//字典获取数据干扰源类型
|
|||
|
|
getLoadType() {
|
|||
|
|
var code = "Interference_Source";
|
|||
|
|
this.interfereoption = dicData(code, []);
|
|||
|
|
this.formData.loadType = this.interfereoption;
|
|||
|
|
},
|
|||
|
|
//获取统计类型
|
|||
|
|
getclassificationData() {
|
|||
|
|
var code = "Statistical_Type";
|
|||
|
|
this.classificationData = dicData(code, [
|
|||
|
|
"Report_Type",
|
|||
|
|
"Voltage_Level",
|
|||
|
|
"Load_Type",
|
|||
|
|
]);
|
|||
|
|
this.formData.statisticalType = this.classificationData[0];
|
|||
|
|
},
|
|||
|
|
rest() {
|
|||
|
|
this.deptName = "全国";
|
|||
|
|
this.formData = {
|
|||
|
|
deptIndex: "",
|
|||
|
|
monitorFlag: 2,
|
|||
|
|
loadType: [],
|
|||
|
|
manufacturer: [],
|
|||
|
|
searchBeginTime: "",
|
|||
|
|
searchEndTime: "",
|
|||
|
|
statisticalType: "",
|
|||
|
|
scale: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
@import url("../../../styles/comStyle.less");
|
|||
|
|
// .dhys {
|
|||
|
|
// background:rgb(244, 246, 247);
|
|||
|
|
// width:36.5%;
|
|||
|
|
// height:33px;
|
|||
|
|
// position: absolute;
|
|||
|
|
// right :0;
|
|||
|
|
// z-index: 2000000;
|
|||
|
|
// }
|
|||
|
|
// //展示标签时激活
|
|||
|
|
// .v-enter-active{
|
|||
|
|
// animation: atguigu 0.5s linear;
|
|||
|
|
// }
|
|||
|
|
// //不展示标签时激活
|
|||
|
|
// .v-leave-active{
|
|||
|
|
// animation: atguigu 0.5s linear reverse;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// @keyframes atguigu {
|
|||
|
|
// from{
|
|||
|
|
// transform: translateX(-100%);
|
|||
|
|
// }
|
|||
|
|
// to{
|
|||
|
|
// transform: translateX(0px);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
/* margin: auto; */
|
|||
|
|
top: 0px;
|
|||
|
|
right: 0;
|
|||
|
|
width:40%;
|
|||
|
|
height:0px;
|
|||
|
|
z-index:2000;
|
|||
|
|
position: absolute;
|
|||
|
|
background-color: #e4e7ebb9;
|
|||
|
|
overflow: auto;
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
-radius: 20px;
|
|||
|
|
}
|
|||
|
|
/* 隐藏滚动条 */
|
|||
|
|
::-webkit-scrollbar {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.expend {
|
|||
|
|
animation: expend ease 5s forwards;
|
|||
|
|
}
|
|||
|
|
.close-container {
|
|||
|
|
animation: no-expend ease 1s forwards;
|
|||
|
|
}
|
|||
|
|
@keyframes expend {
|
|||
|
|
from {
|
|||
|
|
top: 0px;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
height: auto;
|
|||
|
|
top: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes no-expend {
|
|||
|
|
from {
|
|||
|
|
height: 10%;
|
|||
|
|
top: 0px;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
top: 0px;
|
|||
|
|
height: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.coles{
|
|||
|
|
position:absolute;
|
|||
|
|
right:0;
|
|||
|
|
font-size:20px;
|
|||
|
|
cursor:pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|