|
|
@@ -1,482 +1,711 @@
|
|
|
<template>
|
|
|
- <div class="knowledge-2">
|
|
|
- <div class="query mg-b-8">
|
|
|
- <div class="query-items">
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">场站：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
|
|
|
- <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">预警分类：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-model="wtId" clearable collapse-tags multiple placeholder="请选择"
|
|
|
- popper-class="select">
|
|
|
- <el-option label="全选" :class="active?'selected':''" @click="checkAll"/>
|
|
|
- <el-option v-for="(item ,index) in wtIdArr" :key="index" :value="item" :label="item" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item" style="width: 445px;">
|
|
|
- <div class="lable">日期：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-date-picker v-model="month" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期">
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-actions">
|
|
|
- <button class="btn" @click="query">查询</button>
|
|
|
- <button class="btn" @click="">导入</button>
|
|
|
- <button class="btn" @click="export">导出</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-row :type="'flex'" class="content">
|
|
|
- <el-col :span="24">
|
|
|
- <ComTable :data="tableData" height="85vh"></ComTable>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="knowledge-2">
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">场站：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="wpId"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in wpArray"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">预警分类：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="wtId"
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ label="全选"
|
|
|
+ :class="active ? 'selected' : ''"
|
|
|
+ @click="checkAll"
|
|
|
+ />
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in wtIdArr"
|
|
|
+ :key="index"
|
|
|
+ :value="item"
|
|
|
+ :label="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item" style="width: 445px">
|
|
|
+ <div class="lable">日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="month"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn" @click="query">查询</button>
|
|
|
+ <!-- <button class="btn" @click="">导入</button> -->
|
|
|
+ <button class="btn" @click="export">导出</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row :type="'flex'" class="content">
|
|
|
+ <el-col :span="24">
|
|
|
+ <ComTable :data="tableData" height="85vh"></ComTable>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
- <el-dialog :title="yssjTitle" v-model="yssjDialog" width="70%" top="15vh" custom-class="modal"
|
|
|
- :close-on-click-modal="false" :before-close="yssjDialogClose">
|
|
|
- <div class="query mg-b-8">
|
|
|
- <div class="query-items">
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">等间隔：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-if="!chooseStatus" @change="switchChange(selectValue)" class="inputs"
|
|
|
- v-model="selectValue" placeholder="请选择">
|
|
|
- <el-option v-for="item in timeoptions" :key="item.value" :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-actions">
|
|
|
- <button class="btn" @click="queryYssj">查询</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-dialog
|
|
|
+ :title="yssjTitle"
|
|
|
+ v-model="yssjDialog"
|
|
|
+ width="70%"
|
|
|
+ top="15vh"
|
|
|
+ custom-class="modal"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :before-close="yssjDialogClose"
|
|
|
+ >
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">等间隔：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-if="!chooseStatus"
|
|
|
+ @change="switchChange(selectValue)"
|
|
|
+ class="inputs"
|
|
|
+ v-model="selectValue"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in timeoptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn" @click="queryYssj">查询</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-row type="flex">
|
|
|
- <multiple-y-line-chart-normal height="500px" :list="Powertrend" :showLegend="true" />
|
|
|
- </el-row>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <el-row type="flex">
|
|
|
+ <multiple-y-line-chart-normal
|
|
|
+ height="500px"
|
|
|
+ :list="Analysis"
|
|
|
+ :yAxises="AnalysisYAxises"
|
|
|
+ :showLegend="true"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import ComTable from "@com/coms/table/table.vue";
|
|
|
- import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
|
|
|
- import BASE from "@tools/basicTool.js";
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- ComTable,
|
|
|
- MultipleYLineChartNormal
|
|
|
- },
|
|
|
- data() {
|
|
|
- let that = this;
|
|
|
- return {
|
|
|
- active: true,
|
|
|
- selectAll: true,
|
|
|
- Powertrend: [],
|
|
|
- selectValue: "60",
|
|
|
- timeoptions: [{
|
|
|
- value: "60",
|
|
|
- label: "一分钟",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "300",
|
|
|
- label: "五分钟",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "600",
|
|
|
- label: "十分钟",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "1800",
|
|
|
- label: "三十分钟",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "3600",
|
|
|
- label: "一小时",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "86400",
|
|
|
- label: "一天",
|
|
|
- },
|
|
|
- ],
|
|
|
- yssjDialog: false,
|
|
|
- yssjData:{},
|
|
|
- month: [],
|
|
|
- wpId: "MHS_FDC",
|
|
|
- wpArray: [],
|
|
|
- wpName: "",
|
|
|
- wtId: [],
|
|
|
- wtIdArr: [],
|
|
|
- wtidData: [],
|
|
|
- wtIdNum: false,
|
|
|
- tableDataArr: {},
|
|
|
- tableData: {
|
|
|
- column: [{
|
|
|
- name: "序号",
|
|
|
- field: "index",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- width: "60px"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "风机编号",
|
|
|
- field: "fjbh",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- width: "150px"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "预警分类",
|
|
|
- field: "yjfl",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "预警描述",
|
|
|
- field: "yjms",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "预警次数（次）",
|
|
|
- field: "yjcs",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable: true,
|
|
|
- width: "150px"
|
|
|
- }, {
|
|
|
- name: "预警时长（分钟）",
|
|
|
- field: "yjsc",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable: true,
|
|
|
- width: "150px"
|
|
|
- }, {
|
|
|
- name: "操作",
|
|
|
- field: "cz",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- width: "150px",
|
|
|
- template: function() {
|
|
|
- return "<a class='action'>原始数据</a>";
|
|
|
- },
|
|
|
- click: function(event, data) {
|
|
|
- that.yssjTitle = data.yjms;
|
|
|
- that.requestDetailData(that.wpId, data.fjbh, data.yjms, that.month);
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getWp();
|
|
|
- this.month = [new Date((new Date() - 3600 * 1000 * 24 * 30)), new Date()];
|
|
|
- this.requestSafeList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- requestDetailData(wpId, fjbh, yjms, time) {
|
|
|
- let that = this;
|
|
|
- that.yssjData = {
|
|
|
- wpId:wpId,
|
|
|
- fjbh:fjbh,
|
|
|
- yjms:yjms,
|
|
|
- time:time
|
|
|
- };
|
|
|
- BASE.showLoading();
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- subUrl: "/analysis/detail",
|
|
|
- data: {
|
|
|
- station: wpId,
|
|
|
- startTs: new Date(new Date(time[0]).formatDate("yyyy/MM/dd")).getTime(),
|
|
|
- endTs: new Date(new Date(time[1]).formatDate("yyyy/MM/dd")).getTime(),
|
|
|
- interval: that.selectValue,
|
|
|
- wtId: fjbh,
|
|
|
- name: yjms
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- if (res.data.length != 0) {
|
|
|
- let Powertrend = [];
|
|
|
- res.data.forEach((cEle, index) => {
|
|
|
- Powertrend.push({
|
|
|
- title: cEle.name,
|
|
|
- smooth: true,
|
|
|
- value: [],
|
|
|
- })
|
|
|
- cEle.data.forEach((rEle) => {
|
|
|
- Powertrend[index].value.push({
|
|
|
- text: new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
- value: rEle.doubleValue
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- if (Powertrend.length != 0) {
|
|
|
- that.Powertrend = Powertrend;
|
|
|
- BASE.closeLoading();
|
|
|
- that.yssjDialog = true;
|
|
|
- }
|
|
|
- } else {
|
|
|
- BASE.closeLoading();
|
|
|
- that.BASE.showMsg({
|
|
|
- msg: "暂无数据"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- queryYssj() {
|
|
|
- let data = this.yssjData;
|
|
|
- this.requestDetailData(data.wpId, data.fjbh, data.yjms, data.time)
|
|
|
- },
|
|
|
- switchChange(interval, status) {
|
|
|
- if (status === 'interval') {
|
|
|
- this.chooseStatus = false
|
|
|
- this.selectValue = '60'
|
|
|
- } else if (status === 'original') {
|
|
|
- this.chooseStatus = true
|
|
|
- }
|
|
|
- },
|
|
|
- formatDate(date) {
|
|
|
- var date = new Date(date);
|
|
|
- var YY = date.getFullYear() + '-';
|
|
|
- var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
|
|
- var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
|
|
|
- return YY + MM + DD;
|
|
|
- },
|
|
|
- // 获取风场
|
|
|
- getWp() {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- baseURL: "http://10.155.32.4:8082/",
|
|
|
- subUrl: "powercompare/windfarmAjax",
|
|
|
- success(res) {
|
|
|
- that.wpArray = res.data;
|
|
|
- that.wpId = res.data[0].id;
|
|
|
- that.wpName = res.data[0].wpName;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取停机事件
|
|
|
- requestSafeList() {
|
|
|
- let that = this;
|
|
|
- // if (wtIdData) {
|
|
|
- // that.tableData.data = wtIdData;
|
|
|
- // that.wtIdData = [];
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // if (wpId) {
|
|
|
- // that.wpId = wpId;
|
|
|
- // }
|
|
|
- that.month[0] = that.formatDate(that.month[0].valueOf())
|
|
|
- that.month[1] = that.formatDate(that.month[1].valueOf())
|
|
|
- let data = {
|
|
|
- stationid: that.wpId,
|
|
|
- startdate: that.month[0].valueOf(),
|
|
|
- enddate: that.month[1].valueOf(),
|
|
|
- };
|
|
|
- that.API.requestData({
|
|
|
- showLoading: true,
|
|
|
- baseURL: "http://192.168.1.18:8075/",
|
|
|
- subUrl: "alarm/count/query/new",
|
|
|
- data,
|
|
|
- success(res) {
|
|
|
- if (res.code == 200) {
|
|
|
- that.tableData.data = [];
|
|
|
- if (res.data.length) {
|
|
|
- let data = res.data;
|
|
|
- let tabData = [];
|
|
|
- let index = 1;
|
|
|
- let wtIdArr = [];
|
|
|
- data.forEach((ele, idx) => {
|
|
|
- let key = Object.keys(ele);
|
|
|
- ele[key].forEach((ele2, idx2) => {
|
|
|
- if (ele2.time != 0 && ele2.count >= 10) { //过滤条件
|
|
|
- let obj = {
|
|
|
- index: index++,
|
|
|
- fjbh: ele2.windturbineId,
|
|
|
- yjfl: ele2.relatePartsText,
|
|
|
- yjms: ele2.alertText,
|
|
|
- yjcs: ele2.count,
|
|
|
- yjsc: ele2.time,
|
|
|
- };
|
|
|
- tabData.push(obj);
|
|
|
- let result = wtIdArr.some(ele4=>{
|
|
|
- return ele2.relatePartsText === ele4
|
|
|
- })
|
|
|
- if(result == false){
|
|
|
- wtIdArr.push(ele2.relatePartsText)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- that.wtIdArr = wtIdArr;
|
|
|
- that.wtId = wtIdArr;
|
|
|
- that.tableData.data = tabData;
|
|
|
- that.tableDataArr = {
|
|
|
- column: that.tableData.column,
|
|
|
- data: tabData
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- query() {
|
|
|
- this.requestSafeList();
|
|
|
- },
|
|
|
- checkAll() {
|
|
|
- this.selectAll = !this.selectAll
|
|
|
- if (this.selectAll) {
|
|
|
- this.wtId = this.wtIdArr;
|
|
|
- this.active = true;
|
|
|
- } else {
|
|
|
- this.active = false;
|
|
|
- this.wtId = [];
|
|
|
- }
|
|
|
- },
|
|
|
- formatJson(filterVal, jsonData) {
|
|
|
- return jsonData.map(v => filterVal.map(j => v[j]));
|
|
|
- },
|
|
|
- export() {
|
|
|
- let that = this;
|
|
|
- const {export_json_to_excel} = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径
|
|
|
- let tHeader = []; // 上面设置Excel的表格第一行的标题
|
|
|
- let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
-
|
|
|
- that.tableData.column.forEach(ele => {
|
|
|
- if(ele.field != 'cz'){
|
|
|
- tHeader.push(ele.name);
|
|
|
- filterVal.push(ele.field);
|
|
|
- }
|
|
|
- });
|
|
|
- const data = that.formatJson(filterVal, that.tableData.data);
|
|
|
- export_json_to_excel(tHeader, data, '预警分析'); // 最后一个是表名字
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- wpId() {
|
|
|
- this.wtidData = undefined;
|
|
|
- this.wtIdNum = false;
|
|
|
- },
|
|
|
- wtId(e) {
|
|
|
- if (this.wtIdNum) {
|
|
|
- let data = [];
|
|
|
- let index = 1;
|
|
|
- let tableDataArr = this.tableDataArr;
|
|
|
- tableDataArr.data.forEach(ele => {
|
|
|
- e.forEach(ele2 => {
|
|
|
- if (ele.yjfl == ele2) {
|
|
|
- let obj = {
|
|
|
- index: index++,
|
|
|
- fjbh: ele.fjbh,
|
|
|
- yjfl: ele.yjfl,
|
|
|
- yjms: ele.yjms,
|
|
|
- yjcs: ele.yjcs,
|
|
|
- yjsc: ele.yjsc,
|
|
|
- };
|
|
|
- data.push(obj)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- if (data) {
|
|
|
- this.tableData.data = data;
|
|
|
- // this.wtidData = data;
|
|
|
- }
|
|
|
- }
|
|
|
- this.wtIdNum = true;
|
|
|
- },
|
|
|
- // month(e) {
|
|
|
- // this.month = [new Date((e - 3600 * 1000 * 24 * 30)), e];
|
|
|
- // }
|
|
|
- }
|
|
|
- };
|
|
|
+import ComTable from "@com/coms/table/table.vue";
|
|
|
+import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
|
|
|
+import BASE from "@tools/basicTool.js";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ComTable,
|
|
|
+ MultipleYLineChartNormal,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let that = this;
|
|
|
+ return {
|
|
|
+ active: true,
|
|
|
+ selectAll: true,
|
|
|
+ AnalysisName: "",
|
|
|
+ AnalysisUnit: "",
|
|
|
+ Analysis: [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ yAxisIndex: 0, // 使用单位
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ AnalysisYAxises: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: "",
|
|
|
+ max: "",
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: "",
|
|
|
+ max: "",
|
|
|
+ unit: "",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ selectValue: "60",
|
|
|
+ timeoptions: [
|
|
|
+ {
|
|
|
+ value: "60",
|
|
|
+ label: "一分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "300",
|
|
|
+ label: "五分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "600",
|
|
|
+ label: "十分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "1800",
|
|
|
+ label: "三十分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "3600",
|
|
|
+ label: "一小时",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "86400",
|
|
|
+ label: "一天",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yssjDialog: false,
|
|
|
+ yssjData: {},
|
|
|
+ month: [],
|
|
|
+ wpId: "MHS_FDC",
|
|
|
+ wpArray: [],
|
|
|
+ wpName: "",
|
|
|
+ wtId: [],
|
|
|
+ wtIdArr: [],
|
|
|
+ wtidData: [],
|
|
|
+ wtIdNum: false,
|
|
|
+ tableDataArr: {},
|
|
|
+ tableData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "序号",
|
|
|
+ field: "index",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ width: "60px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "风机编号",
|
|
|
+ field: "fjbh",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ width: "150px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "预警分类",
|
|
|
+ field: "yjfl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ width: "300px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "预警描述",
|
|
|
+ field: "yjms",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "预警次数（次）",
|
|
|
+ field: "yjcs",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ width: "300px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "预警时长（分钟）",
|
|
|
+ field: "yjsc",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ width: "300px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "操作",
|
|
|
+ field: "cz",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ width: "200px",
|
|
|
+ template: function () {
|
|
|
+ return "<a class='action'>原始数据</a>";
|
|
|
+ },
|
|
|
+ click: function (event, data) {
|
|
|
+ that.yssjTitle = data.yjms;
|
|
|
+ that.requestDetailData(
|
|
|
+ that.wpId,
|
|
|
+ data.fjbh,
|
|
|
+ data.yjms,
|
|
|
+ that.month
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getWp();
|
|
|
+ this.month = [new Date(new Date() - 3600 * 1000 * 24 * 1), new Date()];
|
|
|
+ this.requestSafeList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ requestDetailData(wpId, fjbh, yjms, time) {
|
|
|
+ let that = this;
|
|
|
+ that.yssjData = {
|
|
|
+ wpId: wpId,
|
|
|
+ fjbh: fjbh,
|
|
|
+ yjms: yjms,
|
|
|
+ time: time,
|
|
|
+ };
|
|
|
+ BASE.showLoading();
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "/analysis/detail",
|
|
|
+ data: {
|
|
|
+ station: wpId,
|
|
|
+ startTs: new Date(new Date(time[0]).formatDate("yyyy/MM/dd")).getTime(),
|
|
|
+ endTs: new Date(new Date(time[1]).formatDate("yyyy/MM/dd")).getTime(),
|
|
|
+ interval: that.selectValue,
|
|
|
+ wtId: fjbh,
|
|
|
+ name: yjms,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res.data.length == 1) {
|
|
|
+ that.yssjDialog = true;
|
|
|
+ BASE.closeLoading();
|
|
|
+ let yaxises = [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // yaxises.name = res.data[0].name;
|
|
|
+ yaxises.unit = res.data[0].unit;
|
|
|
+ that.AnalysisYAxises = yaxises;
|
|
|
+ let aKey1 = ["doubleValue"];
|
|
|
+ let aList1 = [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ aKey1.forEach((keyEle, keyIndex) => {
|
|
|
+ aList1[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle) => {
|
|
|
+ aList1[keyIndex].value.push({
|
|
|
+ text: new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value: rEle.doubleValue,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.Analysis = aList1;
|
|
|
+ } else if (res.data.length == 2) {
|
|
|
+ that.yssjDialog = true;
|
|
|
+ BASE.closeLoading();
|
|
|
+ let aKey2 = ["doubleValue", "doubleValue"];
|
|
|
+ let aList2 = [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let yaxises1 = [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ yaxises1.forEach((aEle, aIndex) => {
|
|
|
+ res.data.forEach((rEle) => {
|
|
|
+ // aEle.name = rEle.name;
|
|
|
+ aEle.unit = rEle.unit;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.AnalysisYAxises = yaxises1;
|
|
|
+ aKey2.forEach((keyEle, keyIndex) => {
|
|
|
+ aList2[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle) => {
|
|
|
+ aList2[keyIndex].value.push({
|
|
|
+ text: new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value: rEle.doubleValue,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.Analysis = aList2;
|
|
|
+ } else if (res.data.length == 4) {
|
|
|
+ that.yssjDialog = true;
|
|
|
+ BASE.closeLoading();
|
|
|
+ let aKey4 = [
|
|
|
+ "doubleValue",
|
|
|
+ "doubleValue",
|
|
|
+ "doubleValue",
|
|
|
+ "doubleValue",
|
|
|
+ ];
|
|
|
+ let aList4 = [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
+ smooth: true,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let yaxises2 = [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ yaxises2.forEach((aEle, aIndex) => {
|
|
|
+ res.data.forEach((rEle) => {
|
|
|
+ // aEle.name = rEle.name;
|
|
|
+ aEle.unit = rEle.unit;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.AnalysisYAxises = yaxises2;
|
|
|
+ aKey4.forEach((keyEle, keyIndex) => {
|
|
|
+ aList4[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle) => {
|
|
|
+ aList4[keyIndex].value.push({
|
|
|
+ text: new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value: rEle.doubleValue,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.Analysis = aList4;
|
|
|
+ } else if (res.data.length == 0) {
|
|
|
+ that.yssjDialog = false;
|
|
|
+ BASE.closeLoading();
|
|
|
+ that.BASE.showMsg({
|
|
|
+ type: "warning",
|
|
|
+ msg: "暂无数据",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ BASE.closeLoading();
|
|
|
+ that.BASE.showMsg({
|
|
|
+ msg: "暂无数据",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryYssj() {
|
|
|
+ let data = this.yssjData;
|
|
|
+ this.requestDetailData(data.wpId, data.fjbh, data.yjms, data.time);
|
|
|
+ },
|
|
|
+ switchChange(interval, status) {
|
|
|
+ if (status === "interval") {
|
|
|
+ this.chooseStatus = false;
|
|
|
+ this.selectValue = "60";
|
|
|
+ } else if (status === "original") {
|
|
|
+ this.chooseStatus = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatDate(dates) {
|
|
|
+ var date = new Date(dates);
|
|
|
+ var YY = date.getFullYear() + "-";
|
|
|
+ var MM =
|
|
|
+ (date.getMonth() + 1 < 10
|
|
|
+ ? "0" + (date.getMonth() + 1)
|
|
|
+ : date.getMonth() + 1) + "-";
|
|
|
+ var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
|
+ return YY + MM + DD;
|
|
|
+ },
|
|
|
+ // 获取风场
|
|
|
+ getWp() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ baseURL: "http://10.155.32.4:8082/",
|
|
|
+ subUrl: "powercompare/windfarmAjax",
|
|
|
+ success(res) {
|
|
|
+ that.wpArray = res.data;
|
|
|
+ that.wpId = res.data[0].id;
|
|
|
+ that.wpName = res.data[0].wpName;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取停机事件
|
|
|
+ requestSafeList() {
|
|
|
+ let that = this;
|
|
|
+ // if (wtIdData) {
|
|
|
+ // that.tableData.data = wtIdData;
|
|
|
+ // that.wtIdData = [];
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if (wpId) {
|
|
|
+ // that.wpId = wpId;
|
|
|
+ // }
|
|
|
+ that.month[0] = that.formatDate(that.month[0].valueOf());
|
|
|
+ that.month[1] = that.formatDate(that.month[1].valueOf());
|
|
|
+ let data = {
|
|
|
+ stationid: that.wpId,
|
|
|
+ startdate: that.month[0].valueOf(),
|
|
|
+ enddate: that.month[1].valueOf(),
|
|
|
+ };
|
|
|
+ that.API.requestData({
|
|
|
+ showLoading: true,
|
|
|
+ baseURL: "http://192.168.1.18:8075/",
|
|
|
+ subUrl: "alarm/count/query/new",
|
|
|
+ data,
|
|
|
+ success(res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.tableData.data = [];
|
|
|
+ if (res.data.length) {
|
|
|
+ let data = res.data;
|
|
|
+ let tabData = [];
|
|
|
+ let index = 1;
|
|
|
+ let wtIdArr = [];
|
|
|
+ data.forEach((ele, idx) => {
|
|
|
+ let key = Object.keys(ele);
|
|
|
+ ele[key].forEach((ele2, idx2) => {
|
|
|
+ if (ele2.time != 0 && ele2.count >= 10) {
|
|
|
+ //过滤条件
|
|
|
+ let obj = {
|
|
|
+ index: index++,
|
|
|
+ fjbh: ele2.windturbineId,
|
|
|
+ yjfl: ele2.relatePartsText,
|
|
|
+ yjms: ele2.alertText,
|
|
|
+ yjcs: ele2.count,
|
|
|
+ yjsc: ele2.time,
|
|
|
+ };
|
|
|
+ tabData.push(obj);
|
|
|
+ let result = wtIdArr.some((ele4) => {
|
|
|
+ return ele2.relatePartsText === ele4;
|
|
|
+ });
|
|
|
+ if (result == false) {
|
|
|
+ wtIdArr.push(ele2.relatePartsText);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.wtIdArr = wtIdArr;
|
|
|
+ that.wtId = wtIdArr;
|
|
|
+ that.tableData.data = tabData;
|
|
|
+ that.tableDataArr = {
|
|
|
+ column: that.tableData.column,
|
|
|
+ data: tabData,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query() {
|
|
|
+ this.requestSafeList();
|
|
|
+ },
|
|
|
+ checkAll() {
|
|
|
+ this.selectAll = !this.selectAll;
|
|
|
+ if (this.selectAll) {
|
|
|
+ this.wtId = this.wtIdArr;
|
|
|
+ this.active = true;
|
|
|
+ } else {
|
|
|
+ this.active = false;
|
|
|
+ this.wtId = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
+ },
|
|
|
+ export() {
|
|
|
+ let that = this;
|
|
|
+ const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
|
|
|
+ let tHeader = []; // 上面设置Excel的表格第一行的标题
|
|
|
+ let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
+
|
|
|
+ that.tableData.column.forEach((ele) => {
|
|
|
+ if (ele.field != "cz") {
|
|
|
+ tHeader.push(ele.name);
|
|
|
+ filterVal.push(ele.field);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const data = that.formatJson(filterVal, that.tableData.data);
|
|
|
+ export_json_to_excel(tHeader, data, "预警分析"); // 最后一个是表名字
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ wpId() {
|
|
|
+ this.wtidData = undefined;
|
|
|
+ this.wtIdNum = false;
|
|
|
+ },
|
|
|
+ wtId(e) {
|
|
|
+ if (this.wtIdNum) {
|
|
|
+ let data = [];
|
|
|
+ let index = 1;
|
|
|
+ let tableDataArr = this.tableDataArr;
|
|
|
+ tableDataArr.data.forEach((ele) => {
|
|
|
+ e.forEach((ele2) => {
|
|
|
+ if (ele.yjfl == ele2) {
|
|
|
+ let obj = {
|
|
|
+ index: index++,
|
|
|
+ fjbh: ele.fjbh,
|
|
|
+ yjfl: ele.yjfl,
|
|
|
+ yjms: ele.yjms,
|
|
|
+ yjcs: ele.yjcs,
|
|
|
+ yjsc: ele.yjsc,
|
|
|
+ };
|
|
|
+ data.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ if (data) {
|
|
|
+ this.tableData.data = data;
|
|
|
+ // this.wtidData = data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.wtIdNum = true;
|
|
|
+ },
|
|
|
+ // month(e) {
|
|
|
+ // this.month = [new Date((e - 3600 * 1000 * 24 * 30)), e];
|
|
|
+ // }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scope>
|
|
|
- @titleGray: #9ca5a8;
|
|
|
- @rowGray: #606769;
|
|
|
- @darkBack: #536268;
|
|
|
+@titleGray: #9ca5a8;
|
|
|
+@rowGray: #606769;
|
|
|
+@darkBack: #536268;
|
|
|
|
|
|
- .knowledge-2 {
|
|
|
- .el-select {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
+.knowledge-2 {
|
|
|
+ .el-select {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
|
|
|
- .action {
|
|
|
- text-decoration: underline;
|
|
|
- color: @green;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .action {
|
|
|
+ text-decoration: underline;
|
|
|
+ color: @green;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
|
|
|
- .el-input {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-input {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style type="text/css">
|
|
|
- .el-month-table td.today .cell {
|
|
|
- color: #05bb4c;
|
|
|
- }
|
|
|
+.el-month-table td.today .cell {
|
|
|
+ color: #05bb4c;
|
|
|
+}
|
|
|
|
|
|
- .el-month-table td.end-date .cell,
|
|
|
- .el-month-table td.start-date .cell {
|
|
|
- background-color: #05bb4c;
|
|
|
- }
|
|
|
+.el-month-table td.end-date .cell,
|
|
|
+.el-month-table td.start-date .cell {
|
|
|
+ background-color: #05bb4c;
|
|
|
+}
|
|
|
|
|
|
- .el-month-table td.in-range div,
|
|
|
- .el-month-table td.in-range div:hover {
|
|
|
- background: rgba(96, 103, 105, 0.4);
|
|
|
- }
|
|
|
+.el-month-table td.in-range div,
|
|
|
+.el-month-table td.in-range div:hover {
|
|
|
+ background: rgba(96, 103, 105, 0.4);
|
|
|
+}
|
|
|
|
|
|
- .el-date-editor.el-date-editor--monthrange {
|
|
|
- border: 1px solid rgba(96, 103, 105, 0.2);
|
|
|
- height: 33px;
|
|
|
- padding: 0 8px;
|
|
|
- width: 369px;
|
|
|
- }
|
|
|
+.el-date-editor.el-date-editor--monthrange {
|
|
|
+ border: 1px solid rgba(96, 103, 105, 0.2);
|
|
|
+ height: 33px;
|
|
|
+ padding: 0 8px;
|
|
|
+ width: 369px;
|
|
|
+}
|
|
|
|
|
|
- .el-date-editor.el-date-editor--monthrange .el-range-separator {
|
|
|
- color: #B3BDC0;
|
|
|
- line-height: 33px;
|
|
|
- }
|
|
|
+.el-date-editor.el-date-editor--monthrange .el-range-separator {
|
|
|
+ color: #b3bdc0;
|
|
|
+ line-height: 33px;
|
|
|
+}
|
|
|
|
|
|
- .el-date-editor.el-date-editor--monthrange .el-range-input {
|
|
|
- flex-basis: 145px;
|
|
|
- line-height: 33px;
|
|
|
- background: transparent;
|
|
|
- color: #B3BDC0;
|
|
|
- }
|
|
|
+.el-date-editor.el-date-editor--monthrange .el-range-input {
|
|
|
+ flex-basis: 145px;
|
|
|
+ line-height: 33px;
|
|
|
+ background: transparent;
|
|
|
+ color: #b3bdc0;
|
|
|
+}
|
|
|
|
|
|
- .el-picker-panel.el-date-picker {
|
|
|
- background: transparent;
|
|
|
- color: #B3BDC0;
|
|
|
- }
|
|
|
+.el-picker-panel.el-date-picker {
|
|
|
+ background: transparent;
|
|
|
+ color: #b3bdc0;
|
|
|
+}
|
|
|
|
|
|
- .el-picker-panel.el-date-picker td.current .cell {
|
|
|
- background-color: #05bb4c;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+.el-picker-panel.el-date-picker td.current .cell {
|
|
|
+ background-color: #05bb4c;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
|
|
|
- .el-picker-panel.el-date-picker td .cell:hover {
|
|
|
- color: #05bb4c;
|
|
|
- }
|
|
|
+.el-picker-panel.el-date-picker td .cell:hover {
|
|
|
+ color: #05bb4c;
|
|
|
+}
|
|
|
|
|
|
- .el-picker-panel.el-date-picker td.current div,
|
|
|
- .el-picker-panel.el-date-picker td.current div:hover {
|
|
|
- background: rgba(96, 103, 105, 0.4);
|
|
|
- border-radius: 50px;
|
|
|
- }
|
|
|
+.el-picker-panel.el-date-picker td.current div,
|
|
|
+.el-picker-panel.el-date-picker td.current div:hover {
|
|
|
+ background: rgba(96, 103, 105, 0.4);
|
|
|
+ border-radius: 50px;
|
|
|
+}
|
|
|
</style>
|
