|
|
@@ -4,13 +4,17 @@
|
|
|
class="Site-details"
|
|
|
:style="
|
|
|
activeName === 'first'
|
|
|
- ? 'height: 684px;'
|
|
|
+ ? 'min-height:700px;'
|
|
|
+ : activeName === 'second'
|
|
|
+ ? 'min-height:700px;'
|
|
|
: activeName === 'third'
|
|
|
? 'height: 670px;'
|
|
|
+ : activeName === 'fourth'
|
|
|
+ ? 'min-height: 830px;'
|
|
|
: 'height: 710px;'
|
|
|
"
|
|
|
>
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick" id="device_tabs">
|
|
|
<el-tab-pane label="实时数据" name="first">
|
|
|
<el-tabs
|
|
|
v-model="ac_content"
|
|
|
@@ -23,75 +27,71 @@
|
|
|
style="display: flex"
|
|
|
class="model"
|
|
|
>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- v-for="arr in model_array.slice(0, 16)"
|
|
|
- :key="arr"
|
|
|
- class="display"
|
|
|
- >
|
|
|
- <div>{{ arr.name }}</div>
|
|
|
- <div>{{ arr.value }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- v-for="arr in model_array.slice(16, 30)"
|
|
|
- :key="arr"
|
|
|
- class="display"
|
|
|
- >
|
|
|
- <div>{{ arr.name }}</div>
|
|
|
- <div>{{ arr.value }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- v-for="arr in model_array.slice(30, 46)"
|
|
|
- :key="arr"
|
|
|
- class="display"
|
|
|
- >
|
|
|
- <div>{{ arr.name }}</div>
|
|
|
- <div>{{ arr.value }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
+ <div v-for="(all, index) in 4" :key="index">
|
|
|
<div
|
|
|
- v-for="arr in model_array.slice(46)"
|
|
|
+ v-for="arr in model_array.slice(
|
|
|
+ index == 0 ? 0 : index == 1 ? 20 : index == 2 ? 40 : 60,
|
|
|
+ index == 0
|
|
|
+ ? 20
|
|
|
+ : index == 1
|
|
|
+ ? 40
|
|
|
+ : index == 2
|
|
|
+ ? 60
|
|
|
+ : model_array.length
|
|
|
+ )"
|
|
|
:key="arr"
|
|
|
class="display"
|
|
|
>
|
|
|
- <div>{{ arr.name }}</div>
|
|
|
- <div>{{ arr.value }}</div>
|
|
|
+ <el-tooltip
|
|
|
+ :disabled="arr.name.length > 10 ? false : true"
|
|
|
+ effect="dark"
|
|
|
+ :content="arr.name"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>{{ arr.name }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ :disabled="arr.value.length > 10 ? false : true"
|
|
|
+ effect="dark"
|
|
|
+ :content="arr.value"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>{{ arr.value }}</div>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="状态量" name="states" class="states">
|
|
|
- <div>
|
|
|
+ <div v-for="(all, index) in 2" :key="index">
|
|
|
<div
|
|
|
- v-for="arr in state_array.slice(0, 17)"
|
|
|
+ v-for="arr in state_array.slice(
|
|
|
+ index == 0 ? 0 : state_array.length / 2,
|
|
|
+ index == 0 ? state_array.length / 2 : state_array.length
|
|
|
+ )"
|
|
|
:key="arr"
|
|
|
class="display"
|
|
|
>
|
|
|
<div style="display: flex">
|
|
|
- <div class="name">{{ arr.name }}</div>
|
|
|
- <div :class="'state_' + arr.value"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- v-for="arr in state_array.slice(17)"
|
|
|
- :key="arr"
|
|
|
- class="display"
|
|
|
- >
|
|
|
- <div style="display: flex">
|
|
|
- <div class="name1">{{ arr.name }}</div>
|
|
|
+ <el-tooltip
|
|
|
+ :disabled="arr.name.length > 10 ? false : true"
|
|
|
+ effect="dark"
|
|
|
+ :content="arr.name"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div :class="index == 0 ? 'name' : 'name1'">
|
|
|
+ {{ arr.name }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
<div :class="'state_' + arr.value"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <el-button type="primary" class="primary">刷新</el-button>
|
|
|
+ <el-button type="primary" class="primary" @click="Real_time_api"
|
|
|
+ >刷新</el-button
|
|
|
+ >
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="历史趋势" name="second" style="top: 1px">
|
|
|
<el-tabs
|
|
|
@@ -134,23 +134,23 @@
|
|
|
>
|
|
|
</el-tabs>
|
|
|
<div class="block">
|
|
|
- <span>选择时间范围:</span>
|
|
|
+ <span>选择时间范围 :</span>
|
|
|
<el-date-picker
|
|
|
- v-model="defaultTime"
|
|
|
+ v-model="se_defaultTime"
|
|
|
type="datetimerange"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
range-separator="~"
|
|
|
- :disabledDate="disabledDate"
|
|
|
+ :disabledDate="se_disabledDate"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="数据报表" name="third" style="top: 2px">
|
|
|
<div class="block">
|
|
|
- <span>选择时间范围:</span>
|
|
|
+ <span>选择时间范围 :</span>
|
|
|
<el-date-picker
|
|
|
- v-model="defaultTime"
|
|
|
+ v-model="th_defaultTime"
|
|
|
type="datetimerange"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@@ -159,8 +159,23 @@
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
<div class="operation">
|
|
|
- <el-button type="primary" class="query" :disabled="checkedCities.length > 0 ? false : true" @click="Time_all">查询</el-button>
|
|
|
- <el-button type="primary" class="export" :disabled="tableData.length > 0 ? false : true">导出</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="query"
|
|
|
+ :disabled="checkedCities.length > 0 ? false : true"
|
|
|
+ @click="Time_all"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="export"
|
|
|
+ :disabled="
|
|
|
+ th_tableData.length > 0 && checkedCities.length > 0
|
|
|
+ ? false
|
|
|
+ : true
|
|
|
+ "
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box">
|
|
|
@@ -180,38 +195,34 @@
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <el-table :data="tableData" style="width: 100%" height="520" show>
|
|
|
- <el-table-column prop="time" label="时间" fixed>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="电流 A" v-if="columnHeaders[0].isShow">
|
|
|
- <el-table-column prop="name" label="A相电流"> </el-table-column>
|
|
|
- <el-table-column prop="province" label="B相电流">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="city" label="C相电流"> </el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="电流 B" v-if="columnHeaders[1].isShow">
|
|
|
- <el-table-column prop="name" label="B相电流"> </el-table-column>
|
|
|
- <el-table-column prop="province" label="B相电流">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="city" label="B相电流"> </el-table-column>
|
|
|
+ <el-table
|
|
|
+ class="elTable"
|
|
|
+ :data="th_tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="520"
|
|
|
+ show
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ label="时间"
|
|
|
+ :render-header="labelHead"
|
|
|
+ fixed
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
- <!-- <el-table-column label="地址">
|
|
|
- <el-table-column prop="province" label="省份" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="city" label="市区" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="address" label="地址"> </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ <template v-for="(table, index) in table_list" :key="index">
|
|
|
+ <el-table-column
|
|
|
+ :label="table.name"
|
|
|
+ v-if="columnHeaders[index].isShow"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :render-header="labelHead"
|
|
|
+ v-for="list in table.list"
|
|
|
+ :key="list"
|
|
|
+ :label="list.name"
|
|
|
+ :prop="list.value"
|
|
|
+ ></el-table-column>
|
|
|
</el-table-column>
|
|
|
- </el-table-column> -->
|
|
|
+ </template>
|
|
|
|
|
|
<template #empty>
|
|
|
<div class="zwsj">
|
|
|
@@ -222,20 +233,70 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
- <devicemotore
|
|
|
+ <devicesecond
|
|
|
v-if="activeName === 'second'"
|
|
|
ref="main"
|
|
|
:defaul_tTime="defaultTime"
|
|
|
- ></devicemotore>
|
|
|
- <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px"
|
|
|
- >运行状态统计</el-tab-pane
|
|
|
- >
|
|
|
+ ></devicesecond>
|
|
|
+ <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px">
|
|
|
+ <div class="ft_content">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="ctn_one">
|
|
|
+ <div class="one_text">{{ loadLive }}</div>
|
|
|
+ <div>当前回路带电/停电</div>
|
|
|
+ </div>
|
|
|
+ <div class="ctn_one">
|
|
|
+ <div>{{ day_count }}</div>
|
|
|
+ <div>本日 OFF 次数</div>
|
|
|
+ </div>
|
|
|
+ <div class="ctn_one">
|
|
|
+ <div>{{ month_count }}</div>
|
|
|
+ <div>本月 OFF 次数</div>
|
|
|
+ </div>
|
|
|
+ <div class="ctn_one">
|
|
|
+ <div>0</div>
|
|
|
+ <div>本日 OFF 时长</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" class="primary">下载</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ctn_time">
|
|
|
+ <span>选择时间范围 :</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="fh_defaultTime"
|
|
|
+ type="datetimerange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ range-separator="~"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="ctn_echarts">
|
|
|
+ <devicedistion
|
|
|
+ v-if="activeName === 'fourth'"
|
|
|
+ ref="distion"
|
|
|
+ :defaul_tTime="defaultTime"
|
|
|
+ ></devicedistion>
|
|
|
+ <deviceStateCurve
|
|
|
+ v-if="activeName === 'fourth'"
|
|
|
+ ref="statecurve"
|
|
|
+ :defaul_tTime="defaultTime"
|
|
|
+ ></deviceStateCurve>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import devicemotore from "../site_ehcarts/Device_motore";
|
|
|
+import api from "../../api/site/Device_motore";
|
|
|
+import devicesecond from "../site_ehcarts/Device_second";
|
|
|
+import devicedistion from "../site_ehcarts/Device_distion";
|
|
|
+import deviceStateCurve from "../site_ehcarts/Device_StateCurve";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
const cityOptions = [
|
|
|
"电流",
|
|
|
"功率",
|
|
|
@@ -248,134 +309,43 @@ const cityOptions = [
|
|
|
"通讯参数",
|
|
|
"电压突变",
|
|
|
];
|
|
|
+const time = new Date();
|
|
|
+const Y = time.getFullYear(); //年
|
|
|
+const M = time.getMonth(); //月
|
|
|
+const D = time.getDate(); //日
|
|
|
+// const timestamp = new Date().getTime();//时间戳
|
|
|
+
|
|
|
export default {
|
|
|
name: "site_details",
|
|
|
- components: { devicemotore },
|
|
|
+ components: { devicesecond, devicedistion, deviceStateCurve },
|
|
|
data() {
|
|
|
return {
|
|
|
- activeName: "first",
|
|
|
- ac_content: "model",
|
|
|
- se_content: "flow",
|
|
|
- se_label: "电流",
|
|
|
-
|
|
|
- model_array: [
|
|
|
- { name: "A相电压：", value: "236.94V" },
|
|
|
- { name: "B相电压：", value: "237.94V" },
|
|
|
- { name: "C相电压：", value: "237.82V" },
|
|
|
- { name: "回路电压：", value: "236.94V" },
|
|
|
- { name: "A相电流：", value: "0A" },
|
|
|
- { name: "B相电流：", value: "0A" },
|
|
|
- { name: "C相电流：", value: "0A" },
|
|
|
- { name: "剩余电流（漏电流）：", value: "0mA" },
|
|
|
- { name: "外接温度1：", value: "-273℃" },
|
|
|
- { name: "外接温度2：", value: "-273℃" },
|
|
|
- { name: "外接温度3：", value: "-273℃" },
|
|
|
- { name: "外接温度4：", value: "-273℃" },
|
|
|
- { name: "频率：", value: "49.97Hz" },
|
|
|
- { name: "AB线电压：", value: "411.06V" },
|
|
|
- { name: "BC线电压：", value: "412.48V" },
|
|
|
- { name: "CA线电压：", value: "410.66V" },
|
|
|
+ activeName: "first", //最外层tabs切换name
|
|
|
+ ac_content: "model", //实时数据tabs切换name
|
|
|
+ se_content: "flow", //历史趋势tabs切换name
|
|
|
+ se_label: "电流", //历史趋势label/name信息存储 tabs切换时调用接口进行判断的值
|
|
|
|
|
|
- { name: "A相有功功率：", value: "0kW" },
|
|
|
- { name: "A相无功功率：", value: "0kVar" },
|
|
|
- { name: "A相功率因数：", value: 0 },
|
|
|
- { name: "B相有功功率：", value: "0kW" },
|
|
|
- { name: "B相无功功率：", value: "0kVar" },
|
|
|
- { name: "B相功率因数：", value: "0" },
|
|
|
- { name: "C相有功功率：", value: "0kW" },
|
|
|
- { name: "C相无功功率：", value: "0kVar" },
|
|
|
- { name: "C相功率因数：", value: "0" },
|
|
|
- { name: "总有功功率：", value: "0kW" },
|
|
|
- { name: "总无功功率：", value: "0kVar" },
|
|
|
- { name: "功率因数：", value: "0" },
|
|
|
- { name: "实时需量：", value: "0kW" },
|
|
|
- { name: "昨日最大有功需量：", value: "0.12kW" },
|
|
|
+ model_array: [], //实时数据->模拟量接口返回信息存储
|
|
|
+ state_array: [], //实时数据->状态接口返回信息存储
|
|
|
+ th_tableData: [], //数据报表->table表格数据存储
|
|
|
|
|
|
- { name: "昨日Pmax发生时间：", value: "1057" },
|
|
|
- { name: "负序电流：", value: "0.075A" },
|
|
|
- { name: "零序电流：", value: "0.05A" },
|
|
|
- { name: "负序电压不平衡度：", value: "0.37%" },
|
|
|
- { name: "零序电压不平衡度：", value: "0.12%" },
|
|
|
- { name: "A相电压畸变率：", value: "1.59%" },
|
|
|
- { name: "B相电压畸变率：", value: "1.75%" },
|
|
|
- { name: "C相电压畸变率：", value: "1.6%" },
|
|
|
- { name: "Ia总谐波电流：", value: "0A" },
|
|
|
- { name: "Ib总谐波电流：", value: "0A" },
|
|
|
- { name: "Ic总谐波电流：", value: "0A" },
|
|
|
- { name: "设备温度：", value: "33.1℃" },
|
|
|
- { name: "设备信号强度：", value: "29" },
|
|
|
- { name: "电压暂升次数：", value: "102次" },
|
|
|
- { name: "电压暂降次数：", value: "6次" },
|
|
|
- { name: "电压中断次数：", value: "6次" },
|
|
|
+ se_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //历史趋势时间选择器v-model
|
|
|
+ th_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //数据报表时间选择器v-model
|
|
|
+ fh_defaultTime: [new Date(Y, M, 1, 0, 0, 0), new Date()], //运行状态统计时间选择器v-model
|
|
|
|
|
|
- { name: "母线停电次数：", value: "1次" },
|
|
|
- { name: "设备复位次数：", value: "0次" },
|
|
|
- { name: "正有功电度：", value: "8.27.0001kWh" },
|
|
|
- { name: "负有功电度：", value: "3.4kWh" },
|
|
|
- { name: "正无功电度：", value: "410.2kWh" },
|
|
|
- { name: "负无功电度：", value: "37kWh" },
|
|
|
- { name: "尖段正向有功：", value: "0kWh" },
|
|
|
- { name: "尖段反向有功：", value: "0kWh" },
|
|
|
- { name: "峰段正向有功：", value: "652.8kWh" },
|
|
|
- { name: "峰段反向有功：", value: "3.2kWh" },
|
|
|
- { name: "平段正向有功：", value: "0kWh" },
|
|
|
- { name: "平段反向有功：", value: "0kWh" },
|
|
|
- { name: "谷段正向有功：", value: "157.2kWh" },
|
|
|
- { name: "谷段反向有功：", value: "0.2kWh" },
|
|
|
- ],
|
|
|
- state_array: [
|
|
|
- { name: "外接遥信1状态：", value: "OFF" },
|
|
|
- { name: "外接遥信2状态：", value: "OFF" },
|
|
|
- { name: "外接遥信3状态：", value: "OFF" },
|
|
|
- { name: "火警预警总：", value: "OFF" },
|
|
|
- { name: "线路电气故障总：", value: "OFF" },
|
|
|
- { name: "电压缺相：", value: "OFF" },
|
|
|
- { name: "回路带电/停电：", value: "ON" },
|
|
|
- { name: "线路开关状态：", value: "ON" },
|
|
|
- { name: "电压越上限告警：", value: "OFF" },
|
|
|
- { name: "电压越下限告警：", value: "OFF" },
|
|
|
- { name: "电流越限：", value: "OFF" },
|
|
|
- { name: "回路跳闸：", value: "OFF" },
|
|
|
- { name: "母线停电：", value: "OFF" },
|
|
|
- { name: "剩余电流超限：", value: "OFF" },
|
|
|
- { name: "测温点T1超温：", value: "OFF" },
|
|
|
- { name: "测温点T2超温：", value: "OFF" },
|
|
|
- { name: "测温点T3超温：", value: "OFF" },
|
|
|
+ disabledDate(date) {
|
|
|
+ return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
|
|
|
+ },
|
|
|
|
|
|
- { name: "测温点T4超温：", value: "OFF" },
|
|
|
- { name: "设备温度越限：", value: "OFF" },
|
|
|
- { name: "A相燃弧：", value: "OFF" },
|
|
|
- { name: "B相燃弧：", value: "OFF" },
|
|
|
- { name: "C相燃弧：", value: "OFF" },
|
|
|
- { name: "电压谐波越限：", value: "OFF" },
|
|
|
- { name: "电流谐波越限：", value: "OFF" },
|
|
|
- { name: "视在需量超限：", value: "OFF" },
|
|
|
- { name: "测量通道故障：", value: "OFF" },
|
|
|
- { name: "设备异常：", value: "OFF" },
|
|
|
- { name: "消音：", value: "OFF" },
|
|
|
- { name: "继电器1状态：", value: "OFF" },
|
|
|
- { name: "继电器2状态：", value: "OFF" },
|
|
|
- { name: "备用遥信1：", value: "OFF" },
|
|
|
- { name: "备用遥信2：", value: "OFF" },
|
|
|
- { name: "备用遥信3：", value: "OFF" },
|
|
|
- { name: "备用遥信4：", value: "OFF" },
|
|
|
- ],
|
|
|
+ loadLive: "ON", //运行状态统计->当前回路带电/停电
|
|
|
+ month_count: 0, //运行状态统计->本月off次数
|
|
|
+ day_count: 0, //运行状态统计->本日off次数
|
|
|
|
|
|
value: "",
|
|
|
- defaultTime: [
|
|
|
- new Date(2021, 6, 1, 0, 0, 0),
|
|
|
- new Date(2021, 6, 1, 12, 0, 0),
|
|
|
- ],
|
|
|
- disabledDate(date) {
|
|
|
- return date.getTime() > new Date();
|
|
|
- },
|
|
|
checkAll: false,
|
|
|
checkedCities: [],
|
|
|
cities: cityOptions,
|
|
|
isIndeterminate: false,
|
|
|
- tableData: [],
|
|
|
-
|
|
|
- msg: "暂无数据",
|
|
|
|
|
|
columnHeaders: [
|
|
|
{ index: 0, title: "电流", isShow: false },
|
|
|
@@ -384,58 +354,108 @@ export default {
|
|
|
{ index: 3, title: "电压", isShow: false },
|
|
|
{ index: 4, title: "温度", isShow: false },
|
|
|
{ index: 5, title: "频率", isShow: false },
|
|
|
+ { index: 6, title: "功率因数", isShow: false },
|
|
|
+ { index: 7, title: "谐波电流有效值", isShow: false },
|
|
|
+ { index: 8, title: "通讯参数", isShow: false },
|
|
|
+ { index: 9, title: "电压突变", isShow: false },
|
|
|
+ ],
|
|
|
+
|
|
|
+ table_list: [
|
|
|
+ {
|
|
|
+ name: "电流",
|
|
|
+ list: [
|
|
|
+ { name: "A相电流", value: "name" },
|
|
|
+ { name: "B相电流", value: "name" },
|
|
|
+ { name: "C相电流", value: "name" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "功率",
|
|
|
+ list: [
|
|
|
+ { name: "A相有功功率 kW", value: "name" },
|
|
|
+ { name: "A相无功功率 kVar", value: "name" },
|
|
|
+ { name: "B相有功功率 kW", value: "name" },
|
|
|
+ { name: "B相无功功率 kVar", value: "name" },
|
|
|
+ { name: "C相有功功率 kW", value: "name" },
|
|
|
+ { name: "C相无功功率 kVar", value: "name" },
|
|
|
+ { name: "总有功功率 kW", value: "name" },
|
|
|
+ { name: "总无功功率 kW", value: "name" },
|
|
|
+ { name: "实时需量 kW", value: "name" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
{
|
|
|
- index: 6,
|
|
|
- title: "功率因数",
|
|
|
- isShow: false,
|
|
|
+ name: "电度",
|
|
|
+ list: [
|
|
|
+ { name: "正有功电度 kWh", value: "name" },
|
|
|
+ { name: "负有功电度 kWh", value: "name" },
|
|
|
+ { name: "正无功电度 kvarh", value: "name" },
|
|
|
+ { name: "负无功电度 kvarh", value: "name" },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
- index: 7,
|
|
|
- title: "谐波电流有效值",
|
|
|
- isShow: false,
|
|
|
+ name: "电压",
|
|
|
+ list: [
|
|
|
+ { name: "A相电压 kV", value: "name" },
|
|
|
+ { name: "B相电压 kV", value: "name" },
|
|
|
+ { name: "C相电压 kV", value: "name" },
|
|
|
+ { name: "回路电压 V", value: "name" },
|
|
|
+ { name: "AB线电压 V", value: "name" },
|
|
|
+ { name: "BC线电压 V", value: "name" },
|
|
|
+ { name: "CA线电压 V", value: "name" },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
- index: 8,
|
|
|
- title: "通讯参数",
|
|
|
- isShow: false,
|
|
|
+ name: "温度 ℃",
|
|
|
+ list: [
|
|
|
+ { name: "外接温度1", value: "name" },
|
|
|
+ { name: "外接温度2", value: "name" },
|
|
|
+ { name: "外接温度3", value: "name" },
|
|
|
+ { name: "外接温度4", value: "name" },
|
|
|
+ { name: "环境温度", value: "name" },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
- index: 9,
|
|
|
- title: "电压突变",
|
|
|
- isShow: false,
|
|
|
+ name: "频率 Hz",
|
|
|
+ list: [{ name: "频率", value: "name" }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "功率因数",
|
|
|
+ list: [
|
|
|
+ { name: "A相功率因数", value: "name" },
|
|
|
+ { name: "B相功率因数", value: "name" },
|
|
|
+ { name: "C相功率因数", value: "name" },
|
|
|
+ { name: "功率因数", value: "name" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "谐波电流有效值 A",
|
|
|
+ list: [
|
|
|
+ { name: "Ia总谐波电流", value: "name" },
|
|
|
+ { name: "Ib总谐波电流 ", value: "name" },
|
|
|
+ { name: "Ic总谐波电流", value: "name" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "通讯参数",
|
|
|
+ list: [{ name: "设备信号强度", value: "name" }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "电压突变 次",
|
|
|
+ list: [
|
|
|
+ { name: "电压暂升次数", value: "name" },
|
|
|
+ { name: "电压暂降次数 ", value: "name" },
|
|
|
+ { name: "电压中断次数", value: "name" },
|
|
|
+ ],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.Real_time_api();
|
|
|
},
|
|
|
methods: {
|
|
|
- preservation() {
|
|
|
- console.log(this.$refs.main.chart);
|
|
|
- var url = this.$refs.main.chart.getConnectedDataURL({
|
|
|
- pixelRatio: 15,
|
|
|
- backgroundColor: "black",
|
|
|
- excludeComponents: ["toolbox"],
|
|
|
- type: "png",
|
|
|
- });
|
|
|
- var $a = document.createElement("a");
|
|
|
- var type = "png";
|
|
|
- //图片名称
|
|
|
- $a.download = this.se_label + "." + type;
|
|
|
- $a.target = "_blank";
|
|
|
- $a.href = url;
|
|
|
- if (typeof MouseEvent === "function") {
|
|
|
- var evt = new MouseEvent("click", {
|
|
|
- view: window,
|
|
|
- bubbles: true,
|
|
|
- cancelable: false,
|
|
|
- });
|
|
|
- $a.dispatchEvent(evt);
|
|
|
- }
|
|
|
- },
|
|
|
//最外层tabs切换事件触发
|
|
|
handleClick(tab, event) {
|
|
|
- // this.Time_all();
|
|
|
// console.log(tab, event);
|
|
|
// console.log(tab.props.name)
|
|
|
this.ac_content = "model";
|
|
|
@@ -450,21 +470,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ if (tab.props.name === "fourth") {
|
|
|
+ this.Operation_status_api();
|
|
|
+ }
|
|
|
},
|
|
|
- //实时数据 内部tabs 点击事件触发
|
|
|
- handleClick1(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- },
|
|
|
+
|
|
|
//历史趋势 内部tabs 点击事件触发
|
|
|
handleClick2(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
this.se_label = tab.props.label;
|
|
|
},
|
|
|
+
|
|
|
Time_all() {
|
|
|
// console.log(this.defaultTime)
|
|
|
// console.log("bbbbbbb",data)
|
|
|
// this.$emit("func", this.defaultTime);
|
|
|
- this.tableData = [
|
|
|
+ this.th_tableData = [
|
|
|
{
|
|
|
time: "2016-05-03",
|
|
|
name: "1",
|
|
|
@@ -617,25 +638,128 @@ export default {
|
|
|
address: "2市3金沙江路 1518 弄",
|
|
|
zip: 200333,
|
|
|
},
|
|
|
- ]
|
|
|
+ ];
|
|
|
},
|
|
|
+
|
|
|
+ //数据报表全选按钮事件
|
|
|
handleCheckAllChange(val) {
|
|
|
this.checkedCities = val ? cityOptions : [];
|
|
|
this.isIndeterminate = false;
|
|
|
},
|
|
|
+ //数据报表多选按钮事件
|
|
|
handleCheckedCitiesChange(value) {
|
|
|
let checkedCount = value.length;
|
|
|
this.checkAll = checkedCount === this.cities.length;
|
|
|
this.isIndeterminate =
|
|
|
checkedCount > 0 && checkedCount < this.cities.length;
|
|
|
},
|
|
|
+ // 控制table中title盒子宽度
|
|
|
+ labelHead(h) {
|
|
|
+ let l = h.column.label.length;
|
|
|
+ if (l <= 6) {
|
|
|
+ l = l + 10;
|
|
|
+ }
|
|
|
+ let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
|
|
|
+ if (h.column.label === "时间") {
|
|
|
+ h.column.minWidth = 100;
|
|
|
+ } else {
|
|
|
+ h.column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ "div",
|
|
|
+ { class: "table-head", style: { width: "100%" } },
|
|
|
+ [h.column.label]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //实时数据 内部tabs 点击事件触发
|
|
|
+ handleClick1(tab, event) {
|
|
|
+ // console.log(tab, event);
|
|
|
+ tab || event;
|
|
|
+ // this.Real_time_api();
|
|
|
+ },
|
|
|
+ //实时数据api请求
|
|
|
+ Real_time_api() {
|
|
|
+ var _this = this;
|
|
|
+ //模拟量api请求
|
|
|
+ function rtAnalogData() {
|
|
|
+ api.rtAnalogData({ siteId: 1 }).then((requset) => {
|
|
|
+ if (requset.status === "SUCCESS") {
|
|
|
+ _this.model_array = requset.data;
|
|
|
+ } else {
|
|
|
+ ElMessage.success({
|
|
|
+ message: requset.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //状态量api请求
|
|
|
+ function rtSwitchData() {
|
|
|
+ api.rtSwitchData({ siteId: 1 }).then((requset) => {
|
|
|
+ if (requset.status === "SUCCESS") {
|
|
|
+ for (let i in requset.data) {
|
|
|
+ requset.data[i].value == 0
|
|
|
+ ? (requset.data[i].value = "OFF")
|
|
|
+ : (requset.data[i].value = "ON");
|
|
|
+ }
|
|
|
+ _this.state_array = requset.data;
|
|
|
+ } else {
|
|
|
+ ElMessage.success({
|
|
|
+ message: requset.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.ac_content === "model"
|
|
|
+ ? rtAnalogData()
|
|
|
+ : this.ac_content === "states"
|
|
|
+ ? rtSwitchData()
|
|
|
+ : "";
|
|
|
+ },
|
|
|
+ //运行状态统计api请求
|
|
|
+ Operation_status_api() {
|
|
|
+ var _this = this;
|
|
|
+ function LoopStatus() {
|
|
|
+ api.LoopStatus({ siteId: 2 }).then((requset) => {
|
|
|
+ // console.log(requset);
|
|
|
+ _this.loadLive = requset.data.LoadLive;
|
|
|
+ _this.month_count = requset.data.month_count;
|
|
|
+ _this.day_count = requset.data.day_count;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ LoopStatus();
|
|
|
+ },
|
|
|
+ //历史趋势ehcarts保存图片
|
|
|
+ preservation() {
|
|
|
+ var url = this.$refs.main.chart.getConnectedDataURL({
|
|
|
+ pixelRatio: 15,
|
|
|
+ backgroundColor: "black",
|
|
|
+ excludeComponents: ["toolbox"],
|
|
|
+ type: "png",
|
|
|
+ });
|
|
|
+ var $a = document.createElement("a");
|
|
|
+ var type = "png";
|
|
|
+ //图片名称
|
|
|
+ $a.download = this.se_label + "." + type;
|
|
|
+ $a.target = "_blank";
|
|
|
+ $a.href = url;
|
|
|
+ if (typeof MouseEvent === "function") {
|
|
|
+ var evt = new MouseEvent("click", {
|
|
|
+ view: window,
|
|
|
+ bubbles: true,
|
|
|
+ cancelable: false,
|
|
|
+ });
|
|
|
+ $a.dispatchEvent(evt);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
/**
|
|
|
* @title 监听列显示隐藏
|
|
|
*/
|
|
|
checkedCities(newArrayVal) {
|
|
|
- newArrayVal.length <= 0 ? this.tableData=[] : ''
|
|
|
+ newArrayVal.length <= 0 ? (this.th_tableData = []) : "";
|
|
|
// 计算为被选中的列标题数组
|
|
|
var nonSelecteds = this.columnHeaders
|
|
|
.filter((item) => newArrayVal.indexOf(item.title) == -1)
|
|
|
@@ -656,6 +780,42 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 运行状态统计css样式
|
|
|
+*/
|
|
|
+.ft_content {
|
|
|
+ margin: 0 15px;
|
|
|
+}
|
|
|
+.ft_content div:nth-child(1) .ctn_one {
|
|
|
+ width: 2.675rem;
|
|
|
+ height: 81px;
|
|
|
+ border-radius: 3px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 244, 253, 0.7) inset;
|
|
|
+ background-color: rgba(8, 31, 47, 1);
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.ft_content div:nth-child(1) .ctn_one div:nth-child(1) {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ font-family: Impact Regular, Impact Regular-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #00f4fd;
|
|
|
+}
|
|
|
+.ft_content div:nth-child(1) .ctn_one .one_text {
|
|
|
+ color: red !important;
|
|
|
+}
|
|
|
+.ft_content .ctn_time {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.ft_content .ctn_time > span {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
<style>
|
|
|
/*
|
|
|
数据报表css样式
|
|
|
@@ -694,21 +854,7 @@ export default {
|
|
|
#pane-third .block span {
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
-#pane-third .el-input__inner {
|
|
|
- width: 414px !important;
|
|
|
- height: 30px !important;
|
|
|
- line-height: 30px !important;
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid rgba(3, 107, 119, 1);
|
|
|
-}
|
|
|
-#pane-third .el-range-input {
|
|
|
- background-color: transparent;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-#pane-third .el-range-separator {
|
|
|
- line-height: 20px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+
|
|
|
#pane-third .operation {
|
|
|
float: right;
|
|
|
margin-right: 10px;
|
|
|
@@ -835,6 +981,11 @@ export default {
|
|
|
height: 374px !important;
|
|
|
z-index: 1;
|
|
|
} */
|
|
|
+
|
|
|
+/* .elTable .cell {
|
|
|
+ white-space: nowrap;
|
|
|
+ display:inline;
|
|
|
+} */
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
@@ -875,7 +1026,7 @@ export default {
|
|
|
min-height: 35px !important;
|
|
|
line-height: 10px;
|
|
|
height: 35px;
|
|
|
- margin: 5px 0.4rem 5px 0px;
|
|
|
+ margin: 2px 0.4rem 5px 0px;
|
|
|
}
|
|
|
.se-content #tab-flow {
|
|
|
border-left: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
@@ -884,15 +1035,8 @@ export default {
|
|
|
#pane-second .block {
|
|
|
margin-top: 3px;
|
|
|
}
|
|
|
-#pane-second .el-input__inner {
|
|
|
- width: 414px !important;
|
|
|
- height: 30px !important;
|
|
|
- line-height: 30px !important;
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid rgba(3, 107, 119, 1);
|
|
|
-}
|
|
|
+
|
|
|
#pane-second span {
|
|
|
- font-size: 0.2rem;
|
|
|
padding: 0 10px;
|
|
|
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
|
|
|
}
|
|
|
@@ -900,10 +1044,6 @@ export default {
|
|
|
background-color: transparent;
|
|
|
color: #fff;
|
|
|
}
|
|
|
-#pane-second .el-range-separator {
|
|
|
- line-height: 20px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
@@ -945,7 +1085,12 @@ export default {
|
|
|
height: 1px !important;
|
|
|
background-color: rgba(0, 244, 253, 0.1) !important;
|
|
|
}
|
|
|
+</style>
|
|
|
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 实时数据css样式
|
|
|
+*/
|
|
|
.ac-content {
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -973,15 +1118,12 @@ export default {
|
|
|
line-height: 8px;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
-<style>
|
|
|
/*
|
|
|
模拟量css样式
|
|
|
*/
|
|
|
.ac-content .model > div {
|
|
|
width: 25%;
|
|
|
- height: 580px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.ac-content .model .display {
|
|
|
@@ -994,6 +1136,9 @@ export default {
|
|
|
text-align: right;
|
|
|
width: 50%;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
.ac-content .model .display div:nth-child(2) {
|
|
|
height: 36px;
|
|
|
@@ -1003,15 +1148,17 @@ export default {
|
|
|
text-align: left;
|
|
|
padding-left: 0.7rem;
|
|
|
color: rgba(1, 201, 208, 1);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
-<style>
|
|
|
/*
|
|
|
状态量css样式
|
|
|
*/
|
|
|
.ac-content .states {
|
|
|
display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
.ac-content .states > div {
|
|
|
width: 50%;
|
|
|
@@ -1022,6 +1169,13 @@ export default {
|
|
|
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
+.ac-content .states .display .name1,
|
|
|
+.name {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
.ac-content .states .display > div:nth-child(1) {
|
|
|
border-bottom: 1px solid rgba(0, 244, 253, 0.1);
|
|
|
width: 100%;
|
|
|
@@ -1059,4 +1213,25 @@ export default {
|
|
|
margin-top: 6px;
|
|
|
margin-left: 0.2rem;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 公共时间选择器css样式
|
|
|
+*/
|
|
|
+#device_tabs .el-input__inner {
|
|
|
+ width: 414px !important;
|
|
|
+ height: 30px !important;
|
|
|
+ line-height: 30px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid rgba(3, 107, 119, 1);
|
|
|
+}
|
|
|
+#device_tabs .el-range-input {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#device_tabs .el-range-separator {
|
|
|
+ line-height: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
fanghuisheng
