|
|
@@ -1,98 +1,354 @@
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
- width="80%"
|
|
|
+ fullscreen
|
|
|
@opened="opened()"
|
|
|
@closed="closed()"
|
|
|
- :show-close="false"
|
|
|
- class="my-info-dialog"
|
|
|
+ modal-class="my-info-dialog"
|
|
|
>
|
|
|
<template #title>
|
|
|
<div style="margin-top: -10px; color: #ffffff">风机详情</div>
|
|
|
</template>
|
|
|
+
|
|
|
<div class="body">
|
|
|
- <div class="titleList">
|
|
|
- <div class="chunkdiv" @click="handleClick(true)">
|
|
|
- <div class="title">风机号： </div>
|
|
|
- <div>{{ windturbine.windturbineId }}</div>
|
|
|
- <!-- <div>
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeName"
|
|
|
+ class="wind-tabs"
|
|
|
+ @tab-click="handleTabsClick"
|
|
|
+ type="border-card"
|
|
|
+ stretch
|
|
|
+ lazy
|
|
|
+ >
|
|
|
+ <el-tab-pane label="主要参数(宁夏)" name="first" class="tabSty">
|
|
|
+ <div class="titleList">
|
|
|
+ <div class="chunkdiv" @click="handleClick(true)">
|
|
|
+ <div class="title">风机号： </div>
|
|
|
+ <div>{{ windturbine.windturbineId }}</div>
|
|
|
+ <!-- <div>
|
|
|
{{ windturbine.stationId.slice(0, 2) }}-{{ windturbine.code }}
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="chunkdiv"
|
|
|
- @click="handleClick(true)"
|
|
|
- @dblclick="dbClicks(baseDate.windSpeed)"
|
|
|
- >
|
|
|
- <div class="title">{{ baseDate.windSpeed.name }}： </div>
|
|
|
- <div>{{ baseDate.windSpeed.value }}{{ baseDate.windSpeed.unit }}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="chunkdiv"
|
|
|
- @click="handleClick(true)"
|
|
|
- @dblclick="dbClicks({ code: 'YDPJFS5M', name: '五分钟平均风速' })"
|
|
|
- >
|
|
|
- <div class="title">五分钟平均风速： </div>
|
|
|
- <div>{{ healthInfo?.averageWindSpeed5?.toFixed(2) }}m/s</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="chunkdiv"
|
|
|
- @click="handleClick(true)"
|
|
|
- @dblclick="dbClicks(theoreticalPower)"
|
|
|
- >
|
|
|
- <div class="title">理论功率： </div>
|
|
|
- <div>{{ healthInfo?.theoreticalPower?.toFixed(2) }}Kw</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="chunkdiv"
|
|
|
- @click="handleClick(true)"
|
|
|
- @dblclick="dbClicks(baseDate.power)"
|
|
|
- >
|
|
|
- <div class="title">{{ baseDate.power.name }}： </div>
|
|
|
- <div>{{ baseDate.power.value }}{{ baseDate.power.unit }}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="chunkdiv"
|
|
|
- @click="handleClick(true)"
|
|
|
- @dblclick="dbClicks(baseDate.generatorSpeed)"
|
|
|
- >
|
|
|
- <div class="title">{{ baseDate.generatorSpeed.name }}： </div>
|
|
|
- <div>
|
|
|
- {{ baseDate.generatorSpeed.value
|
|
|
- }}{{ baseDate.generatorSpeed.unit }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chunkdiv"
|
|
|
+ @click="handleClick(true)"
|
|
|
+ @dblclick="dbClicks(baseDate.windSpeed)"
|
|
|
+ >
|
|
|
+ <div class="title">{{ baseDate.windSpeed.name }}： </div>
|
|
|
+ <div>
|
|
|
+ {{ baseDate.windSpeed.value }}{{ baseDate.windSpeed.unit }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chunkdiv"
|
|
|
+ @click="handleClick(true)"
|
|
|
+ @dblclick="dbClicks({ code: 'YDPJFS5M', name: '五分钟平均风速' })"
|
|
|
+ >
|
|
|
+ <div class="title">五分钟平均风速： </div>
|
|
|
+ <div>{{ healthInfo?.averageWindSpeed5?.toFixed(2) }}m/s</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chunkdiv"
|
|
|
+ @click="handleClick(true)"
|
|
|
+ @dblclick="dbClicks(theoreticalPower)"
|
|
|
+ >
|
|
|
+ <div class="title">理论功率： </div>
|
|
|
+ <div>{{ healthInfo?.theoreticalPower?.toFixed(2) }}Kw</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chunkdiv"
|
|
|
+ @click="handleClick(true)"
|
|
|
+ @dblclick="dbClicks(baseDate.power)"
|
|
|
+ >
|
|
|
+ <div class="title">{{ baseDate.power.name }}： </div>
|
|
|
+ <div>{{ baseDate.power.value }}{{ baseDate.power.unit }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chunkdiv"
|
|
|
+ @click="handleClick(true)"
|
|
|
+ @dblclick="dbClicks(baseDate.generatorSpeed)"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ {{ baseDate.generatorSpeed.name }}： 
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ baseDate.generatorSpeed.value
|
|
|
+ }}{{ baseDate.generatorSpeed.unit }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chunkdiv" @click="handleClick(false)">
|
|
|
+ <div class="title">故障信息:  {{ faultNum }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BasicInformationDetail
|
|
|
+ v-show="current"
|
|
|
+ ref="BasicInfo"
|
|
|
+ :types="types"
|
|
|
+ @health-click="handleHealth"
|
|
|
+ :windturbine="windturbine"
|
|
|
+ ></BasicInformationDetail>
|
|
|
+ <div class="faultInfo" v-show="!current">
|
|
|
+ <div class="left-item">
|
|
|
+ <div
|
|
|
+ :class="item.openedCount > 0 ? 'faultNameErr' : 'faultName'"
|
|
|
+ v-for="(item, index) in fault"
|
|
|
+ :key="index"
|
|
|
+ @click="handleFaultClick(index)"
|
|
|
+ >
|
|
|
+ {{ item.component }}
|
|
|
+ <div class="faultNum" v-if="item.openedCount > 0">
|
|
|
+ ({{ item.openedCount }})
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-item">
|
|
|
+ <div class="tables">
|
|
|
+ <el-table
|
|
|
+ :data="faultList"
|
|
|
+ class="table"
|
|
|
+ style="width: 100%"
|
|
|
+ height="67vh"
|
|
|
+ stripe
|
|
|
+ highlight-current-row
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgb(30,30,30)',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ padding: '4px',
|
|
|
+ fontSize: '14px',
|
|
|
+ 'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
|
|
|
+ }"
|
|
|
+ :cell-style="tableCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="报警编号"
|
|
|
+ width="200"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="modelId"
|
|
|
+ label="风机型号"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="alertText"
|
|
|
+ label="报警信息"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="故障状态" width="120" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>
|
|
|
+ {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="主要参数(山西)" name="second">
|
|
|
+ <div class="paramsMain">
|
|
|
+ <div class="paramsLeft">
|
|
|
+ <div
|
|
|
+ class="dataList"
|
|
|
+ v-for="(it, index) in leftData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataTitles">
|
|
|
+ <div style="margin-left: 24px; font-size: 16px">
|
|
|
+ {{ it.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dataContent">
|
|
|
+ <div
|
|
|
+ class="dataBlock"
|
|
|
+ v-for="(item, index) in it.data"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataName">{{ item.name }}</div>
|
|
|
+ <div class="numerical">
|
|
|
+ <div class="values">{{ item.value }}</div>
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="paramsCenter">
|
|
|
+ <StandAloneImg
|
|
|
+ :activeIndex="showIndex"
|
|
|
+ @selectSvg="selectSvg"
|
|
|
+ class="sai"
|
|
|
+ ></StandAloneImg>
|
|
|
+ <div
|
|
|
+ class="dataList"
|
|
|
+ v-for="(it, index) in centerData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataTitles">
|
|
|
+ <div style="margin-left: 24px; font-size: 16px">
|
|
|
+ {{ it.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dataContent">
|
|
|
+ <div
|
|
|
+ class="dataBlock"
|
|
|
+ v-for="(item, index) in it.data"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataName">{{ item.name }}</div>
|
|
|
+ <div class="numerical">
|
|
|
+ <div class="values">{{ item.value }}</div>
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="paramsRight">
|
|
|
+ <div
|
|
|
+ class="dataList"
|
|
|
+ v-for="(it, index) in rightData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataTitles">
|
|
|
+ <div style="margin-left: 24px; font-size: 16px">
|
|
|
+ {{ it.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dataContent">
|
|
|
+ <div
|
|
|
+ class="dataBlock"
|
|
|
+ v-for="(item, index) in it.data"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataName">{{ item.name }}</div>
|
|
|
+ <div class="numerical">
|
|
|
+ <div class="values">{{ item.value }}</div>
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="chunkdiv" @click="handleClick(false)">
|
|
|
- <div class="title">故障信息:  {{ faultNum }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <BasicInformationDetail
|
|
|
- v-show="current"
|
|
|
- ref="BasicInfo"
|
|
|
- :types="types"
|
|
|
- @health-click="handleHealth"
|
|
|
- :windturbine="windturbine"
|
|
|
- ></BasicInformationDetail>
|
|
|
- <div class="faultInfo" v-show="!current">
|
|
|
- <div class="left-item">
|
|
|
- <div
|
|
|
- :class="item.openedCount > 0 ? 'faultNameErr' : 'faultName'"
|
|
|
- v-for="(item, index) in fault"
|
|
|
- :key="index"
|
|
|
- @click="handleFaultClick(index)"
|
|
|
- >
|
|
|
- {{ item.component }}
|
|
|
- <div class="faultNum" v-if="item.openedCount > 0">
|
|
|
- ({{ item.openedCount }})
|
|
|
+ <div class="paramsMainBot">
|
|
|
+ <div
|
|
|
+ class="dataList"
|
|
|
+ v-for="(it, index) in mainBotData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataTitles">
|
|
|
+ <div style="margin-left: 24px; font-size: 16px">
|
|
|
+ {{ it.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dataContent">
|
|
|
+ <div
|
|
|
+ class="dataBlock"
|
|
|
+ v-for="(item, index) in it.data"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dataName">{{ item.name }}</div>
|
|
|
+ <div class="numerical">
|
|
|
+ <div class="values">{{ item.value }}</div>
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="实时报警" name="third">
|
|
|
+ <div class="nowWarn">
|
|
|
+ <div class="nowWarnTree">
|
|
|
+ <el-tree
|
|
|
+ class="filter-tree"
|
|
|
+ :data="nowWarnTreeData"
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="id"
|
|
|
+ :default-expanded-keys="[0]"
|
|
|
+ ref="tree"
|
|
|
+ @node-click="handleChange"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="nowWarnTable">
|
|
|
+ <el-table
|
|
|
+ :data="nowWarnTableData"
|
|
|
+ class="table"
|
|
|
+ style="width: 100%"
|
|
|
+ height="85vh"
|
|
|
+ stripe
|
|
|
+ highlight-current-row
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgb(30,30,30)',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ padding: '4px',
|
|
|
+ fontSize: '14px',
|
|
|
+ 'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
|
|
|
+ }"
|
|
|
+ :cell-style="tableCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="报警编号"
|
|
|
+ width="200"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ label="最近一次报警时间"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="alertText"
|
|
|
+ label="报警文字信息"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="故障状态" width="120" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>
|
|
|
+ {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="tables">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="历史报警" name="fourth">
|
|
|
+ <div class="searchTitle">
|
|
|
+ <div class="search">
|
|
|
+ <div class="date">日期:</div>
|
|
|
+ <el-date-picker
|
|
|
+ class="pickers"
|
|
|
+ @change="changes"
|
|
|
+ v-model="timeValue"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="buttons">查询</div>
|
|
|
+ <div class="buttons">导出</div>
|
|
|
+ </div>
|
|
|
+ <div class="historyWarnTable">
|
|
|
<el-table
|
|
|
- :data="faultList"
|
|
|
+ :data="historyWarnTableData"
|
|
|
class="table"
|
|
|
style="width: 100%"
|
|
|
- height="67vh"
|
|
|
+ height="75vh"
|
|
|
stripe
|
|
|
highlight-current-row
|
|
|
:header-cell-style="{
|
|
|
@@ -105,32 +361,122 @@
|
|
|
:cell-style="tableCellStyle"
|
|
|
>
|
|
|
<el-table-column
|
|
|
- prop="id"
|
|
|
- label="报警编号"
|
|
|
+ prop="time"
|
|
|
+ label="时间"
|
|
|
width="200"
|
|
|
align="center"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="modelId"
|
|
|
- label="风机型号"
|
|
|
- width="150"
|
|
|
+ prop="id"
|
|
|
+ label="设备"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="alertText"
|
|
|
+ label="报警信息"
|
|
|
+ width="500"
|
|
|
align="center"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alertText" label="报警信息" align="center">
|
|
|
+ <el-table-column prop="leavl" label="级别" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="warnType" label="报警类型" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="stopType" label="停机类型" align="center">
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="故障状态" width="120" align="center">
|
|
|
+ <el-table-column label="故障类型" align="center">
|
|
|
<template #default="scope">
|
|
|
<span>
|
|
|
{{ scope.row.isOpened > 0 ? "故障" : "正常" }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="isOpenedType"
|
|
|
+ label="故障原因"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="paginations">
|
|
|
+ <el-pagination
|
|
|
+ :hide-on-single-page="true"
|
|
|
+ :page-size="page.pagesize"
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="page.total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="测点详情" name="five">
|
|
|
+ <div class="searchTitle">
|
|
|
+ <div class="search">
|
|
|
+ <div class="date">测点:</div>
|
|
|
+ <el-input
|
|
|
+ class="inputs"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="inputVlaues"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="buttons">查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="measurePoint">
|
|
|
+ <div class="measurePointL">
|
|
|
+ <el-table
|
|
|
+ :data="measurePointDataL"
|
|
|
+ class="table"
|
|
|
+ style="width: 100%"
|
|
|
+ height="75vh"
|
|
|
+ stripe
|
|
|
+ highlight-current-row
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgb(30,30,30)',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ padding: '4px',
|
|
|
+ fontSize: '14px',
|
|
|
+ 'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
|
|
|
+ }"
|
|
|
+ :cell-style="tableCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="测点名称" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="value" label="测点值" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="measurePointR">
|
|
|
+ <el-table
|
|
|
+ :data="measurePointDataR"
|
|
|
+ class="table"
|
|
|
+ style="width: 100%"
|
|
|
+ height="75vh"
|
|
|
+ stripe
|
|
|
+ highlight-current-row
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgb(30,30,30)',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ padding: '4px',
|
|
|
+ fontSize: '14px',
|
|
|
+ 'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
|
|
|
+ }"
|
|
|
+ :cell-style="tableCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="测点名称" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="value" label="测点值" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
@@ -138,6 +484,7 @@
|
|
|
<script>
|
|
|
import api from "api/index";
|
|
|
import BasicInformationDetail from "./BasicInformationDetail.vue";
|
|
|
+import StandAloneImg from "./StandAloneImg.vue";
|
|
|
import BackgroundData from "utils/BackgroundData";
|
|
|
import Fault from "utils/fault";
|
|
|
|
|
|
@@ -145,6 +492,7 @@ import dataJson from "./windturbinJsondata.json";
|
|
|
export default {
|
|
|
components: {
|
|
|
BasicInformationDetail,
|
|
|
+ StandAloneImg,
|
|
|
},
|
|
|
props: {
|
|
|
windturbine: Object,
|
|
|
@@ -154,6 +502,8 @@ export default {
|
|
|
current: true,
|
|
|
BasicInfo: {},
|
|
|
healthInfo: {},
|
|
|
+ activeName: "first",
|
|
|
+ showIndex: 1,
|
|
|
line: "",
|
|
|
alarmTime: "",
|
|
|
alarmContent: "",
|
|
|
@@ -221,6 +571,26 @@ export default {
|
|
|
faultNum: 0,
|
|
|
faultList: [],
|
|
|
// station: [],
|
|
|
+ leftData: [],
|
|
|
+ centerData: [],
|
|
|
+ rightData: [],
|
|
|
+ mainBotData: [],
|
|
|
+ nowWarnTreeData: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "name",
|
|
|
+ },
|
|
|
+ nowWarnTableData: [],
|
|
|
+ timeValue: [],
|
|
|
+ historyWarnTableData: [],
|
|
|
+ page: {
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: 100,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ inputVlaues: "",
|
|
|
+ measurePointDataL: [],
|
|
|
+ measurePointDataR: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -228,8 +598,25 @@ export default {
|
|
|
this.baseDate = dataJson.baseDate;
|
|
|
// this.getWindturbineFdc();
|
|
|
},
|
|
|
-
|
|
|
+ mounted() {
|
|
|
+ this.leftData = dataJson.leftData;
|
|
|
+ this.centerData = dataJson.centerData;
|
|
|
+ this.rightData = dataJson.rightData;
|
|
|
+ this.mainBotData = dataJson.mainBotData;
|
|
|
+ this.nowWarnTreeData = dataJson.nowWarnTreeData;
|
|
|
+ this.nowWarnTableData = dataJson.nowWarnTableData;
|
|
|
+ this.historyWarnTableData = dataJson.historyWarnTableData;
|
|
|
+ this.measurePointDataL = dataJson.measurePointDataL;
|
|
|
+ this.measurePointDataR = dataJson.measurePointDataR;
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ handleTabsClick() {},
|
|
|
+ selectSvg(index) {
|
|
|
+ this.showIndex = index;
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page.pagenum = val;
|
|
|
+ },
|
|
|
// getWindturbineFdc() {
|
|
|
// api.getWindturbineFdc().then((res) => {
|
|
|
// this.station = res.data;
|
|
|
@@ -268,7 +655,7 @@ export default {
|
|
|
obj = {
|
|
|
height: "40px",
|
|
|
background: "rgb(30,30,30)",
|
|
|
- color: "#FF0000",
|
|
|
+ color: "rgb(255,156,0)",
|
|
|
padding: "3px",
|
|
|
fontSize: "12px",
|
|
|
"border-top": "0px solid #000000",
|
|
|
@@ -391,11 +778,326 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
.my-info-dialog {
|
|
|
box-shadow: 0px 0px 10px #05bb4c;
|
|
|
-}
|
|
|
+ z-index: 10000 !important;
|
|
|
+ .paramsMain {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .paramsLeft {
|
|
|
+ width: 25%;
|
|
|
+ .dataList {
|
|
|
+ width: 97%;
|
|
|
+ /* min-height: 250px; */
|
|
|
+ background-color: #141414;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 2%;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .dataTitles {
|
|
|
+ display: flex;
|
|
|
+ height: 37px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #242424;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .dataContent {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ justify-content: space-around;
|
|
|
+ .dataBlock {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #242424;
|
|
|
+ border: 1px solid #3d3d3d;
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px 0 20px;
|
|
|
+ .dataName {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numerical {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ color: #05bb4c;
|
|
|
+ align-items: baseline;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ .values {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paramsCenter {
|
|
|
+ width: 50%;
|
|
|
+ .sai {
|
|
|
+ float: left;
|
|
|
+ margin-left: 40px;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 34vh;
|
|
|
+ }
|
|
|
+ .dataList {
|
|
|
+ width: 97%;
|
|
|
+ /* min-height: 250px; */
|
|
|
+ background-color: #141414;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 2%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .dataTitles {
|
|
|
+ display: flex;
|
|
|
+ height: 37px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #242424;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .dataContent {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ justify-content: space-around;
|
|
|
+ .dataBlock {
|
|
|
+ width: 24%;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #242424;
|
|
|
+ border: 1px solid #3d3d3d;
|
|
|
+ margin-top: 22px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px 0 20px;
|
|
|
+ .dataName {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numerical {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ color: #05bb4c;
|
|
|
+ align-items: baseline;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ .values {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paramsRight {
|
|
|
+ width: 25%;
|
|
|
+ .dataList {
|
|
|
+ width: 97%;
|
|
|
+ /* min-height: 250px; */
|
|
|
+ background-color: #141414;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 2%;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .dataTitles {
|
|
|
+ display: flex;
|
|
|
+ height: 37px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #242424;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .dataContent {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ justify-content: space-around;
|
|
|
+ .dataBlock {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #242424;
|
|
|
+ border: 1px solid #3d3d3d;
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px 0 20px;
|
|
|
+ .dataName {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numerical {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ color: #05bb4c;
|
|
|
+ align-items: baseline;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ .values {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paramsMainBot {
|
|
|
+ .dataList {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #141414;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .dataTitles {
|
|
|
+ display: flex;
|
|
|
+ height: 37px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #242424;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .dataContent {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ justify-content: space-around;
|
|
|
+ .dataBlock {
|
|
|
+ width: 20%;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #242424;
|
|
|
+ border: 1px solid #3d3d3d;
|
|
|
+ margin-top: 22px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px 0 20px;
|
|
|
+ .dataName {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numerical {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ color: #05bb4c;
|
|
|
+ align-items: baseline;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ .values {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nowWarn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .nowWarnTree {
|
|
|
+ width: 20%;
|
|
|
+ .el-tree {
|
|
|
+ height: 100%;
|
|
|
+ color: #ffffff !important;
|
|
|
+ background-color: rgba(77, 77, 77, 1) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node:focus > .el-tree-node__content {
|
|
|
+ background-color: #000000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: #000000 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nowWarnTable {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 3vw;
|
|
|
+ padding-top: 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ .search {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 50px;
|
|
|
+ .date {
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .historyWarnTable {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .paginations {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ margin-top: 10px;
|
|
|
+ .el-pagination__total {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .measurePoint {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .measurePointL,
|
|
|
+ .measurePointR {
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
.body {
|
|
|
background-color: black;
|
|
|
margin-top: -30px;
|
|
|
@@ -434,9 +1136,9 @@ table {
|
|
|
width: 20%;
|
|
|
} */
|
|
|
|
|
|
-el-tabs {
|
|
|
+/* el-tabs {
|
|
|
background-color: black;
|
|
|
-}
|
|
|
+} */
|
|
|
|
|
|
.svg {
|
|
|
height: 67vh;
|
|
|
@@ -502,4 +1204,4 @@ el-tabs {
|
|
|
width: 98%;
|
|
|
margin: 1%;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
