|
@@ -6,77 +6,48 @@
|
|
|
<div class="box-bg table-box" style="margin-bottom: 10px">
|
|
|
<div>
|
|
|
<label style="color: var(--vent-font-color)">设备类型:</label>
|
|
|
- <Select
|
|
|
- @change="handleSensorChange"
|
|
|
- :options="deviceTypeOption"
|
|
|
- :fieldNames="{ label: 'label', value: 'value' }"
|
|
|
- v-model:value="deviceKind"
|
|
|
- style="width: 200px; margin-bottom: 5px; color: black"
|
|
|
- placeholder="请选择设备类型"
|
|
|
- :allowClear="true"
|
|
|
- />
|
|
|
+ <Select @change="handleSensorChange" :options="deviceTypeOption"
|
|
|
+ :fieldNames="{ label: 'label', value: 'value' }" v-model:value="deviceKind"
|
|
|
+ style="width: 200px; margin-bottom: 5px; color: black" placeholder="请选择设备类型" :allowClear="true" />
|
|
|
+ <template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode != 'hnjmypmk'">
|
|
|
+ <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFns"> 导出</a-button>
|
|
|
+ </template>
|
|
|
<!--hnjmypmk 崖坪 特有 -->
|
|
|
<template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode === 'hnjmypmk'">
|
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
|
|
|
</template>
|
|
|
- <MonitorTable
|
|
|
- ref="SensorMonitorRef"
|
|
|
- :is-show-select="true"
|
|
|
- :columnsType="deviceKind + '_monitor'"
|
|
|
- :dataSource="dataSource"
|
|
|
- design-scope="modelsensor_monitor"
|
|
|
- @select-row="getSelectRow"
|
|
|
- :deviceType="deviceKind"
|
|
|
- :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }"
|
|
|
- size="''"
|
|
|
- title="传感器监测"
|
|
|
- >
|
|
|
+ <MonitorTable ref="SensorMonitorRef" :is-show-select="true" :columnsType="deviceKind + '_monitor'"
|
|
|
+ :dataSource="dataSource" design-scope="modelsensor_monitor" @select-row="getSelectRow"
|
|
|
+ :deviceType="deviceKind" :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }" size="''" title="传感器监测">
|
|
|
<template #filterCell="{ column, record }">
|
|
|
<a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
|
|
|
record.warnFlag == '0' ? '正常' : '报警'
|
|
|
}}</a-tag>
|
|
|
- <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
|
|
|
- record.netStatus == '0' ? '断开' : '连接'
|
|
|
- }}</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'netStatus'"
|
|
|
+ :color="record.netStatus == '0' ? 'default' : 'green'">{{
|
|
|
+ record.netStatus == '0' ? '断开' : '连接'
|
|
|
+ }}</a-tag>
|
|
|
</template>
|
|
|
</MonitorTable>
|
|
|
</div>
|
|
|
<!-- v-if="chartsColumns.length > 0" -->
|
|
|
<div class="charts-box" v-if="false">
|
|
|
- <BarAndLine
|
|
|
- :chartsColumnsType="selectData.deviceType"
|
|
|
- xAxisPropType="readTime"
|
|
|
- :dataSource="detailDataSource"
|
|
|
- height="300px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- chartsType="detail"
|
|
|
- :option="echartsOption"
|
|
|
- @refresh="refreshEchatrs"
|
|
|
- />
|
|
|
+ <BarAndLine :chartsColumnsType="selectData.deviceType" xAxisPropType="readTime"
|
|
|
+ :dataSource="detailDataSource" height="300px" :chartsColumns="chartsColumns" chartsType="detail"
|
|
|
+ :option="echartsOption" @refresh="refreshEchatrs" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="2" tab="历史数据">
|
|
|
<div class="tab-item table-box box-bg padding-0" v-if="activeKey == '2'">
|
|
|
- <HistoryTable
|
|
|
- :columns-type="deviceKind"
|
|
|
- :device-type="deviceKind"
|
|
|
+ <HistoryTable :columns-type="deviceKind" :device-type="deviceKind"
|
|
|
:device-list-api="list.bind(null, { devicetype: selectData.deviceType })"
|
|
|
- @change="historyDataSourceChange"
|
|
|
- designScope="modelsensor-history"
|
|
|
- :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
|
|
|
- />
|
|
|
+ @change="historyDataSourceChange" designScope="modelsensor-history"
|
|
|
+ :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }" />
|
|
|
<div class="charts-box" v-if="chartsColumns.length > 0">
|
|
|
- <BarAndLine
|
|
|
- :chartsColumnsType="selectData.deviceType"
|
|
|
- xAxisPropType="ttime"
|
|
|
- :dataSource="historyDataSource"
|
|
|
- height="300px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- chartsType="history"
|
|
|
- :option="echartsOption1"
|
|
|
- @refresh="refreshEchatrs"
|
|
|
- />
|
|
|
+ <BarAndLine :chartsColumnsType="selectData.deviceType" xAxisPropType="ttime"
|
|
|
+ :dataSource="historyDataSource" height="300px" :chartsColumns="chartsColumns" chartsType="history"
|
|
|
+ :option="echartsOption1" @refresh="refreshEchatrs" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
@@ -84,36 +55,20 @@
|
|
|
<div class="tab-item box-bg" style="margin-bottom: 10px">
|
|
|
<div style="margin-top: 20px">
|
|
|
<label style="color: var(--vent-font-color); margin-left: 20px">查询设备:</label>
|
|
|
- <Select
|
|
|
- :options="deviceTypeOption"
|
|
|
- :fieldNames="{ label: 'label', value: 'value' }"
|
|
|
- v-model:value="deviceKind"
|
|
|
- style="width: 200px; margin-bottom: 5px; color: black"
|
|
|
- placeholder="请选择传感器类型"
|
|
|
- :allowClear="true"
|
|
|
- />
|
|
|
- <Select
|
|
|
- @change="handleSensorChange1"
|
|
|
- :options="FxData"
|
|
|
- :fieldNames="{ label: 'strinstallpos', value: 'deviceID' }"
|
|
|
- v-model:value="strinstallpos"
|
|
|
- style="width: 200px; margin-bottom: 5px; margin-left: 5px; color: black"
|
|
|
- placeholder="请选择查询设备"
|
|
|
- :allowClear="true"
|
|
|
- />
|
|
|
- <a-button type="primary" style="margin-left: 5px" preIcon="ant-design:export-outlined" @click="onExportXlsFnFx">导出分析数据</a-button>
|
|
|
+ <Select :options="deviceTypeOption" :fieldNames="{ label: 'label', value: 'value' }"
|
|
|
+ v-model:value="deviceKind" style="width: 200px; margin-bottom: 5px; color: black" placeholder="请选择传感器类型"
|
|
|
+ :allowClear="true" />
|
|
|
+ <Select @change="handleSensorChange1" :options="FxData"
|
|
|
+ :fieldNames="{ label: 'strinstallpos', value: 'deviceID' }" v-model:value="strinstallpos"
|
|
|
+ style="width: 200px; margin-bottom: 5px; margin-left: 5px; color: black" placeholder="请选择查询设备"
|
|
|
+ :allowClear="true" />
|
|
|
+ <a-button type="primary" style="margin-left: 5px" preIcon="ant-design:export-outlined"
|
|
|
+ @click="onExportXlsFnFx">导出分析数据</a-button>
|
|
|
</div>
|
|
|
<div class="charts-box" v-if="chartsColumnsFx.length > 0">
|
|
|
- <BarAndLine
|
|
|
- :chartsColumnsType="selectData.deviceType"
|
|
|
- xAxisPropType="ttime"
|
|
|
- :dataSource="historyDataSource1"
|
|
|
- height="300px"
|
|
|
- :chartsColumns="chartsColumnsFx"
|
|
|
- chartsType="history"
|
|
|
- :option="echartsOption1"
|
|
|
- @refresh="refreshEchatrs"
|
|
|
- />
|
|
|
+ <BarAndLine :chartsColumnsType="selectData.deviceType" xAxisPropType="ttime"
|
|
|
+ :dataSource="historyDataSource1" height="300px" :chartsColumns="chartsColumnsFx" chartsType="history"
|
|
|
+ :option="echartsOption1" @refresh="refreshEchatrs" />
|
|
|
</div>
|
|
|
<div class="charts-box" v-else> <span style="color: aliceblue"> 暂无数据 </span> </div>
|
|
|
</div>
|
|
@@ -144,7 +99,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
import { Select } from 'ant-design-vue';
|
|
|
-import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick, unref } from 'vue';
|
|
|
+import { onBeforeMount, computed, ref, onMounted, onUnmounted, toRaw, reactive, nextTick, unref } from 'vue';
|
|
|
import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
import HistoryTable from '../comment/HistoryTable.vue';
|
|
|
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
@@ -360,6 +315,16 @@ function historyDataSourceChange(dataSource) {
|
|
|
if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
|
|
|
}
|
|
|
|
|
|
+//导出
|
|
|
+function onExportXlsFns() {
|
|
|
+ // 判断时间间隔和查询时间区间,数据量下载大时进行提示
|
|
|
+ const url = '/ventanaly-device/monitor/exportAllDeviceInfo';
|
|
|
+ return exportXlsPostBlob('多参数报表', url, {
|
|
|
+ devicetype: deviceKind.value,
|
|
|
+ pagetype: 'normal',
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
function onExportXlsFn() {
|
|
|
// 判断时间间隔和查询时间区间,数据量下载大时进行提示
|
|
|
const url = '/ventanaly-device/safety/reportInfo/expComReportByParam';
|
|
@@ -406,23 +371,28 @@ onUnmounted(() => {
|
|
|
<style lang="less" scoped>
|
|
|
@import '/@/design/theme.less';
|
|
|
@import '/@/design/vent/modal.less';
|
|
|
+
|
|
|
.padding-0 {
|
|
|
padding: 10px 0 !important;
|
|
|
}
|
|
|
+
|
|
|
.sensor-container {
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
top: 65px;
|
|
|
padding: 10px;
|
|
|
z-index: 999;
|
|
|
+
|
|
|
// max-height: calc(100vh - 150px);
|
|
|
.@{ventSpace}-tabs {
|
|
|
max-height: calc(100% - 100px);
|
|
|
+
|
|
|
.tab-item {
|
|
|
max-height: calc(100% - 170px);
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.title-text {
|
|
|
position: absolute;
|
|
|
top: -24px;
|
|
@@ -431,6 +401,7 @@ onUnmounted(() => {
|
|
|
text-align: center;
|
|
|
color: var(--vent-font-color);
|
|
|
}
|
|
|
+
|
|
|
.table-box {
|
|
|
// height: calc(60% - 150px);
|
|
|
height: 780px;
|
|
@@ -454,69 +425,84 @@ onUnmounted(() => {
|
|
|
background-color: #ffffff11;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
+
|
|
|
.table-box-content {
|
|
|
height: 430px;
|
|
|
background-color: #ffffff03;
|
|
|
border-bottom: 1px solid #44d3ff70;
|
|
|
}
|
|
|
+
|
|
|
.charts-box {
|
|
|
height: 300px;
|
|
|
padding: 5px 10px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
:deep(.@{ventSpace}-tabs-card) {
|
|
|
.@{ventSpace}-tabs-tab {
|
|
|
background: var(--vent-device-manager-control-btn-hover);
|
|
|
border-color: #74e9fe;
|
|
|
border-radius: 0%;
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #64d5ff;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
|
|
|
color: aqua;
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-tabs-nav::before {
|
|
|
border-color: #74e9fe;
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-picker,
|
|
|
.@{ventSpace}-select-selector {
|
|
|
width: 100%;
|
|
|
background: #00000017 !important;
|
|
|
border: 1px solid @vent-form-item-border !important;
|
|
|
+
|
|
|
input,
|
|
|
.@{ventSpace}-select-selection-item,
|
|
|
.@{ventSpace}-picker-suffix {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-select-selection-placeholder {
|
|
|
color: #b7b7b7 !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-pagination-next,
|
|
|
.action,
|
|
|
.@{ventSpace}-select-arrow,
|
|
|
.@{ventSpace}-picker-separator {
|
|
|
color: var(--vent-font-color) !important;
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-table-cell-row-hover {
|
|
|
background: #264d8833 !important;
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-table-row-selected {
|
|
|
background: #00c0a311 !important;
|
|
|
+
|
|
|
td {
|
|
|
background-color: #00000000 !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.@{ventSpace}-table-thead {
|
|
|
// background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
|
|
|
background: #3d9dd45d !important;
|
|
|
|
|
|
- & > tr > th,
|
|
|
+ &>tr>th,
|
|
|
.@{ventSpace}-table-column-title {
|
|
|
// color: #70f9fc !important;
|
|
|
border-color: var(--vent-base-border) !important;
|
|
@@ -527,20 +513,23 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.@{ventSpace}-table-tbody {
|
|
|
- tr > td {
|
|
|
+ tr>td {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
}
|
|
|
- .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
|
|
|
+
|
|
|
+ .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
|
|
|
background-color: #26648855 !important;
|
|
|
}
|
|
|
|
|
|
.jeecg-basic-table-row__striped {
|
|
|
+
|
|
|
// background: #97efff11 !important;
|
|
|
td {
|
|
|
background-color: #97efff11 !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.vent-form) {
|
|
|
.@{ventSpace}-select-dropdown {
|
|
|
color: #000000 !important;
|