123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429 |
- <template>
- <div class="sensor-container">
- <a-spin :spinning="loading">
- <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
- <a-tab-pane key="1" tab="实时监测">
- <div class="box-bg table-box" style="margin-bottom: 10px">
- <div>
- <label style="color: #fff">设备类型:</label>
- <Select
- @change="handleSensorChange"
- :options="deviceTypeOption"
- :fieldNames="{ label: 'itemText', value: 'itemValue' }"
- v-model:value="deviceKind"
- style="width: 200px; margin-bottom: 5px; color: black"
- placeholder="请选择设备类型"
- :allowClear="true"
- />
- <MonitorTable
- ref="SensorMonitorRef"
- :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>
- </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"
- />
- </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"
- :device-list-api="list.bind(null, { devicetype: selectData.deviceType })"
- @change="historyDataSourceChange"
- designScope="modelsensor-history"
- :scroll="{ y: chartsColumns.length > 0 ? 400 : 600 }"
- />
- <div class="charts-box" v-if="chartsColumns.length > 0">
- <BarAndLine
- :chartsColumnsType="selectData.deviceType"
- xAxisPropType="gcreatetime"
- :dataSource="historyDataSource"
- height="300px"
- :chartsColumns="chartsColumns"
- chartsType="history"
- :option="echartsOption1"
- @refresh="refreshEchatrs"
- />
- </div>
- </div>
- </a-tab-pane>
- <a-tab-pane key="3" tab="报警历史">
- <div class="tab-item box-bg" v-if="activeKey == '3'">
- <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
- </div>
- </a-tab-pane>
- <a-tab-pane key="4" tab="操作历史">
- <div class="tab-item box-bg">
- <HandlerHistoryTable columns-type="operator_history" device-type="modelsensor" designScope="alarm-history" />
- </div>
- </a-tab-pane>
- </a-tabs>
- <div class="title-text">
- {{ selectData.strname }}
- </div>
- </a-spin>
- </div>
- </template>
- <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 } from 'vue';
- import MonitorTable from '../comment/MonitorTable.vue';
- import HistoryTable from '../comment/HistoryTable.vue';
- import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
- import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
- import { list, getTableList } from './sensor.api';
- import { list as baseList } from '../../deviceManager/sensorTabel/sensor.api';
- import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
- import { cloneDeep } from 'lodash-es';
- const SensorMonitorRef = ref();
- const deviceBaseList = ref([]);
- const activeKey = ref('1');
- const deviceKind = ref('');
- const deviceTypeOption = ref([]);
- // 默认初始是第一行
- const selectRowIndex = ref(0);
- const dataSource = ref([]);
- const detailDataSource = ref<any[]>([]);
- const historyDataSource = ref<any[]>([]);
- const chartsColumns = ref<any[]>([]);
- const loading = ref(true);
- const echartsOption = {
- grid: {
- top: '20%',
- left: '10px',
- right: '5px',
- bottom: '5%',
- containLabel: true,
- },
- toolbox: {
- feature: {},
- },
- };
- const echartsOption1 = {
- grid: {
- top: '20%',
- left: '10px',
- right: '5px',
- bottom: '10%',
- containLabel: true,
- },
- toolbox: {
- feature: {},
- },
- };
- const selectData = reactive({
- strname: '',
- deviceType: '',
- deviceID: '',
- });
- const tabChange = (activeKeyVal) => {
- activeKey.value = activeKeyVal;
- detailDataSource.value = [];
- if (activeKeyVal == 1) {
- nextTick(() => {
- SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID]);
- });
- }
- };
- // https获取监测数据
- let timer: null | NodeJS.Timeout = null;
- const getMonitor = (flag?) => {
- if (Object.prototype.toString.call(timer) === '[object Null]') {
- timer = setTimeout(
- async () => {
- await getDataSource(deviceKind.value);
- if (timer) {
- timer = null;
- }
- getMonitor();
- },
- flag ? 0 : 1000
- );
- }
- };
- const getDataSource = async (devicetype) => {
- const type = devicetype ? devicetype : 'modelsensor';
- const res = await list({ devicetype: type, pagetype: 'normal' });
- dataSource.value = res.msgTxt[0].datalist || [];
- dataSource.value.map((data: any) => {
- const readData = data.readData;
- data = Object.assign(data, readData);
- return data;
- });
- const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
- Object.assign(selectData, data);
- // if (chartsColumns.value.length <= 0 && selectData.deviceType) {
- // handleChange(selectData.deviceType);
- // }
- // 如果当前为监测tab
- if (activeKey.value === '1') {
- // const isHas = detailDataSource.value.find((item) => item['readTime'] === selectData['readTime']);
- // // 获取选中数据
- // if (!isHas) {
- // if (detailDataSource.value.length < 15) {
- // detailDataSource.value.push({ ...selectData });
- // } else {
- // detailDataSource.value.shift();
- // detailDataSource.value.push({ ...selectData });
- // }
- // }
- const dataList = cloneDeep(detailDataSource.value);
- if (dataList.length < 15) {
- dataList.push({ ...selectData });
- } else {
- dataList.shift();
- dataList.push({ ...selectData });
- }
- detailDataSource.value = dataList;
- }
- if (loading.value) {
- loading.value = false;
- }
- return data;
- };
- const getSelectRow = (selectRow, index) => {
- if (!selectRow) return;
- selectRowIndex.value = index;
- const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
- Object.assign(selectData, selectRow, baseData);
- if (selectData.deviceType) {
- // if (timer) {
- // clearTimeout(timer);
- // timer = undefined;
- // }
- if (activeKey.value === '1') detailDataSource.value = [];
- if (activeKey.value === '2') historyDataSource.value = [];
- handleChange(selectData.deviceType);
- }
- };
- // 获取设备基本信息列表
- const getDeviceBaseList = () => {
- getTableList({ pageSize: 1000 }).then((res) => {
- deviceBaseList.value = res.records;
- });
- };
- function handleChange(type) {
- chartsColumns.value = getTableHeaderColumns(type + '_chart');
- console.log('[ type ] >', type, chartsColumns.value);
- }
- function handleSensorChange(type) {
- loading.value = true;
- handleChange(type);
- timer = null;
- dataSource.value = [];
- detailDataSource.value = [];
- }
- function refreshEchatrs() {
- timer = null;
- // getMonitor(true);
- console.log('echarts 刷新');
- }
- function historyDataSourceChange(dataSource) {
- historyDataSource.value = dataSource;
- if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
- }
- onBeforeMount(() => {
- getDeviceBaseList();
- });
- onMounted(async () => {
- const res = await deviceList({ devicetype: 'modelsensor' });
- const obj = res.find((item) => item.itemValue === 'modelsensor');
- deviceTypeOption.value = obj ? obj.children : [];
- deviceKind.value = deviceTypeOption.value[0]['itemValue'] || 'modelsensor_monitor';
- handleChange(deviceKind.value);
- await getMonitor(true);
- });
- onUnmounted(() => {
- if (timer) {
- clearTimeout(timer);
- timer = undefined;
- }
- });
- </script>
- <style lang="less" scoped>
- @import '/@/design/vent/color.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;
- left: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- }
- .table-box {
- // height: calc(60% - 150px);
- height: 780px;
- padding: 20px 10px;
- overflow-y: auto;
- }
- .box-bg {
- // border: 1px solid #4d7ad855;
- // border-radius: 2px;
- // // background-color: #001d3055;
- // -webkit-backdrop-filter: blur(8px);
- // backdrop-filter: blur(8px);
- // box-shadow: 0 0 10px #5984e055 inset;
- // background-color: #00b3ff12;
- padding-bottom: 10px;
- border: 1px solid #44d3ff70;
- border-radius: 2px;
- -webkit-backdrop-filter: blur(8px);
- box-shadow: 0 0 20px #44b4ff33 inset;
- background-color: #ffffff11;
- overflow-y: auto;
- }
- .charts-box {
- height: calc(40% - 80px);
- padding: 5px 10px;
- margin-top: 10px;
- }
- }
- :deep(.@{ventSpace}-tabs-tabpane-active) {
- height: 100%;
- }
- :deep(.@{ventSpace}-tabs-card) {
- .@{ventSpace}-tabs-tab {
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
- 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% !important;
- background: #00000017 !important;
- border: 1px solid @vent-form-item-boder !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: #fff !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,
- .@{ventSpace}-table-column-title {
- // color: #70f9fc !important;
- border-color: #84f2ff !important;
- border-left: none !important;
- border-right: none !important;
- padding: 7px;
- }
- }
- .@{ventSpace}-table-tbody {
- tr > td {
- padding: 12px;
- }
- }
- .@{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;
- }
- }
- }
- </style>
|