123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558 |
- <template>
- <div class="device-box" id="monitorBox">
- <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox" v-if="isRefresh">
- <a-tab-pane key="1" tab="实时监测">
- <template v-if="deviceType == 'fan' && activeKey == '1'">
- <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
- </template>
- <template v-else-if="activeKey == '1' && deviceType">
- <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
- design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="isHaveAction.includes(deviceType.split('_')[0]) ? false : true" :is-show-select="false" title="设备监测"
- :form-config="deviceType == 'safetymonitor' ? formConfig : undefined" :scroll="{y: 650}">
- <template #filterCell="{ column, record }">
- <template v-if="deviceType.startsWith('gate')">
- <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
- <a-tag
- v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
- color="red">正在打开</a-tag>
- <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
- </template>
- <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
- <a-tag
- v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
- color="red">正在关闭</a-tag>
- <a-tag
- v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
- color="default">关闭</a-tag>
- <a-tag
- v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
- color="default">打开</a-tag>
- </template>
- <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
- <a-tag
- v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
- color="red">正在打开</a-tag>
- <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
- </template>
- <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
- <a-tag
- v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
- color="red">正在关闭</a-tag>
- <a-tag
- v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
- color="default">关闭</a-tag>
- <a-tag
- v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
- color="default">打开</a-tag>
- </template>
- </template>
- <template v-if="deviceType.startsWith('windrect')">
- <a-tag v-if="column.dataIndex === 'sign'"
- :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
- record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
- }}</a-tag>
- <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
- <a-tag v-if="record.isRun == -2 || record.isRun == -1"
- :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
- record.isRun == -2 ? '空闲' : '等待'
- }}</a-tag>
- <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
- <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
- </template>
- </template>
- <template v-if="deviceType.startsWith('safetymonitor')">
- <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
- <div v-if="!record.V && column.dataIndex === 'V'">-</div>
- <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
- <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
- <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
- <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
- </template>
- <a-tag v-if="column.dataIndex === 'warnFlag'"
- :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
- record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
- }}</a-tag>
- <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
- record.netStatus == 0 ? '断开' : '连接'
- }}</a-tag>
- </template>
- </MonitorTable>
- </template>
- <!-- 图表 -->
- <!-- <div style="width:100%;height:280px;margin: 20px 0px;">
- <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="strname" :dataSource="dataSource"
- height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
- <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
- :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
- </div> -->
- </a-tab-pane>
- <a-tab-pane key="2" tab="历史数据">
- <div class="tab-item">
- <HistoryTable ref="historyTable" v-if="activeKey == '2'" :columns-type="`${deviceType}`"
- :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
- designScope="device-history" @change="changeHis" />
- </div>
- <!-- 图表 -->
- <!-- <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">
- <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
- <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
- height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
- <BarAndLine v-else xAxisPropType="gdevicename" :dataSource="dataSourceHis" height="100%"
- :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
- </div> -->
- </a-tab-pane>
- <a-tab-pane key="3" tab="报警历史">
- <div class="tab-item">
- <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" columns-type="alarm"
- :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
- designScope="alarm-history" />
- </div>
- </a-tab-pane>
- <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor'">
- <div class="tab-item">
- <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" columns-type="operator_history"
- :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
- designScope="operator-history" />
- </div>
- </a-tab-pane>
- </a-tabs>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick, unref } from 'vue'
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
- import { list, getDeviceList } from './safety.api'
- import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
- import HistoryTable from '../comment/HistoryTable.vue';
- import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
- import MonitorTable from '../comment/MonitorTable.vue';
- import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
- import { Progress } from 'ant-design-vue';
- import { useRouter } from 'vue-router';
- import { formConfig, isHaveAction } from './safety.data'
- import { getDictItemsByCode } from '/@/utils/dict';
- // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
- // const echartsOption = {
- // grid: {
- // top: '60px',
- // left: '10px',
- // right: '25px',
- // bottom: '5%',
- // containLabel: true,
- // },
- // toolbox: {
- // feature: {},
- // },
- // };
- // let alive = ref(true)
- type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
- const props = defineProps({
- pageData: {
- type: Object,
- default: () => { }
- }
- })
- const scroll = {
- y: 360
- }
- const monitorTable = ref()
- const historyTable = ref()
- const alarmHistoryTable = ref()
- const handlerHistoryTable = ref()
- const isRefresh = ref(true)
- const activeKey = ref('1'); // tab key
- const dataSource = shallowRef([]) // 实时监测数据
- const deviceType = ref('') // 监测设备类型
- // let dataSourceHis = shallowRef([])//历史数据
- //历史数据
- async function changeHis(data) {
- // alive.value = false
- // nextTick(() => {
- // dataSourceHis = data
- // alive.value = true
- // })
- }
- async function tabChange(activeKeyVal) {
- activeKey.value = activeKeyVal;
- if (activeKey.value != '1') {
- if (timer != undefined) {
- clearTimeout(timer);
- timer = undefined;
- }
- } else {
- timer = null
- await getMonitor(true)
- }
- };
- // https获取监测数据
- let timer: null | NodeJS.Timeout = null;
- function getMonitor(flag?) {
- if (deviceType.value) {
- if (timer) timer = null
- if (Object.prototype.toString.call(timer) === '[object Null]') {
- timer = setTimeout(async () => {
- await getDataSource()
- if (timer) {
- getMonitor();
- }
- }, flag ? 0 : 1000);
- }
- }
- };
- async function getDataSource() {
- const formData = monitorTable.value.getForm()
- const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } })
- if (res.msgTxt.length > 0) {
- dataSource.value = []
- const dataArr = res.msgTxt[0].datalist || [];
- dataArr.filter((data: any) => {
- const readData = data.readData;
- return Object.assign(data, readData);
- });
- if(deviceType.value == 'safetymonitor'){
- // 如果是安全监控的数据时需要过滤常见设备数据,根据设定的常用安全监控字典去匹配
- const dictCodes = getDictItemsByCode('safetynormal')
- const searchForm = formData.getFieldsValue()
- if(!searchForm['dataTypeName'] && dictCodes && dictCodes.length){
- for(let i=0; i< dictCodes.length; i++){
- const dict = dictCodes[i]
- dataArr.forEach((item) => {
- if(dict['value'] == item['dataTypeName']){
- dataSource.value.push(item)
- }
- })
- }
- }else{
- dataSource.value = dataArr
- }
- }else{
- dataSource.value = dataArr
- }
-
- } else {
- dataSource.value = []
- }
- }
- onMounted(async () => {
- const { currentRoute } = useRouter();
- if(unref(currentRoute)){
- const path = unref(currentRoute).path
- if (path) {
- deviceType.value = path.substring(path.lastIndexOf('/') + 1)
- }
- 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';
- @ventSpace: zxm;
- .device-box {
- width: 100%;
- height: calc(100% - 100px);
- padding-bottom: 10px;
- margin-top: 20px;
- display: flex;
- justify-content: center;
- .tabs-box {
- width: calc(100% - 12px) !important;
- height: 100% !important;
- bottom: 3px !important;
- }
- .device-button-group {
- position: absolute;
- top: -30px;
- display: flex;
- width: 100%;
- .device-button {
- height: 26px;
- padding: 0 20px;
- background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
- clip-path: polygon(10px 0,
- 0 50%,
- 10px 100%,
- 100% 100%,
- calc(100% - 10px) 50%,
- 100% 0);
- display: flex;
- justify-content: center;
- align-items: center;
- color: #FFF;
- position: relative;
- cursor: pointer;
- &:nth-child(1) {
- left: calc(-6px * 1);
- }
- &:nth-child(2) {
- left: calc(-6px * 2);
- }
- &:nth-child(3) {
- left: calc(-6px * 3);
- }
- &:nth-child(4) {
- left: calc(-6px * 4);
- }
- &:nth-child(5) {
- left: calc(-6px * 5);
- }
- &:nth-child(6) {
- left: calc(-6px * 6);
- }
- &:nth-child(7) {
- left: calc(-6px * 7);
- }
- &:nth-child(8) {
- left: calc(-6px * 8);
- }
- &:nth-child(9) {
- left: calc(-6px * 9);
- }
- &:nth-child(10) {
- left: calc(-6px * 10);
- }
- &:nth-child(11) {
- left: calc(-6px * 11);
- }
- &:nth-child(12) {
- left: calc(-6px * 12);
- }
- &:nth-child(13) {
- left: calc(-6px * 13);
- }
- &:nth-child(14) {
- left: calc(-6px * 14);
- }
- &:nth-child(15) {
- left: calc(-6px * 15);
- }
- &:first-child {
- clip-path: polygon(0 0,
- 10px 50%,
- 0 100%,
- 100% 100%,
- calc(100% - 10px) 50%,
- 100% 0);
- }
- }
- .device-active {
- background: linear-gradient(45deg, #04e6fb, #0c5cab);
- &::before {
- border-color: #0efcff;
- box-shadow: 1px 1px 3px 1px #0efcff inset;
- }
- }
- }
- .enter-detail {
- color: #fff;
- cursor: pointer;
- position: absolute;
- right: 120px;
- top: -6px;
- padding: 5px;
- border-radius: 5px;
- margin-left: 8px;
- margin-right: 8px;
- width: auto;
- height: 33px !important;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- padding: 5px 15px 5px 15px;
- cursor: pointer;
- &:hover {
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
- }
- &::before {
- width: calc(100% - 6px);
- height: 27px;
- content: '';
- position: absolute;
- top: 3px;
- right: 0;
- left: 3px;
- bottom: 0;
- z-index: -1;
- border-radius: inherit;
- /*important*/
- background: linear-gradient(#1fa6cb, #127cb5);
- }
- }
- }
- :deep(.@{ventSpace}-tabs-tabpane-active) {
- height: 100%;
- 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;
- }
- :deep(.@{ventSpace}-tabs-card) {
- .@{ventSpace}-tabs-tab {
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
- border-color: #74e9fe;
- border-radius: 0%;
- &:hover {
- color: #64d5ff;
- }
- }
- .@{ventSpace}-tabs-content{
- height: 100% !important;
- }
- .@{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;
- }
- }
- }
- </style>
|