|
|
@@ -1,17 +1,21 @@
|
|
|
<template>
|
|
|
<div class="scene-box">
|
|
|
<!-- <div class="top-header">智能通风管理系统</div> -->
|
|
|
- <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow }"
|
|
|
- @click="showTree('treeShow', true)">
|
|
|
+ <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow }" @click="showTree('treeShow', true)">
|
|
|
<SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" />
|
|
|
<span class="title">{{ treeNodeTitle }}</span>
|
|
|
</div>
|
|
|
<div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow }">
|
|
|
- <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away"
|
|
|
- @click="showTree('treeShow', false)" />
|
|
|
+ <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree('treeShow', false)" />
|
|
|
<div class="device-select-box">
|
|
|
- <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys" :autoExpandParent="true"
|
|
|
- v-model:expandedKeys="expandedKeys" @select="onSelect">
|
|
|
+ <a-tree
|
|
|
+ :show-line="true"
|
|
|
+ :tree-data="treeData"
|
|
|
+ v-model:selectedKeys="selectedKeys"
|
|
|
+ :autoExpandParent="true"
|
|
|
+ v-model:expandedKeys="expandedKeys"
|
|
|
+ @select="onSelect"
|
|
|
+ >
|
|
|
</a-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -28,14 +32,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="location-icon"
|
|
|
+ <div
|
|
|
+ class="location-icon"
|
|
|
:class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow }"
|
|
|
- @click="showTree('location', true)">
|
|
|
+ @click="showTree('location', true)"
|
|
|
+ >
|
|
|
<SvgIcon size="18" name="put-away" />
|
|
|
<span class="location-text">定位图标显示</span>
|
|
|
</div>
|
|
|
- <div class="location-select"
|
|
|
- :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow }">
|
|
|
+ <div class="location-select" :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow }">
|
|
|
<div class="location-select-box">
|
|
|
<div class="location-top-title" @click="showTree('location', false)">
|
|
|
<SvgIcon class="is-expansion-icon location-expansion-icon" size="28" name="expansion" />
|
|
|
@@ -59,8 +64,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tabs-box bottom-tabs-box" :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
|
|
|
- style="height: 290px" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
|
|
|
+ <div
|
|
|
+ class="tabs-box bottom-tabs-box"
|
|
|
+ :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
|
|
|
+ style="height: 290px"
|
|
|
+ @mousedown="setDivHeight($event, 230, scroll, 0)"
|
|
|
+ id="monitorBox"
|
|
|
+ >
|
|
|
<div :style="`padding: 5px; height: ${scroll.y + 100}px`">
|
|
|
<div class="to-small">
|
|
|
<div class="to-home" @click="toHome"></div>
|
|
|
@@ -68,12 +78,16 @@
|
|
|
</div>
|
|
|
<div class="device-button-group" v-if="deviceList.length > 0">
|
|
|
<!-- 关联设备 -->
|
|
|
- <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
|
|
|
- v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}
|
|
|
+ <div
|
|
|
+ class="device-button"
|
|
|
+ :class="{ 'device-active': deviceActive == device.deviceType }"
|
|
|
+ v-for="(device, index) in deviceList"
|
|
|
+ :key="index"
|
|
|
+ @click="monitorChange(index)"
|
|
|
+ >{{ device.deviceName }}
|
|
|
</div>
|
|
|
<!-- 场景详情进入 -->
|
|
|
- <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
|
|
|
- @click.stop="goDetail()">
|
|
|
+ <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail" @click.stop="goDetail()">
|
|
|
<send-outlined />
|
|
|
{{ treeNodeTitle }}详情
|
|
|
</div>
|
|
|
@@ -115,8 +129,7 @@
|
|
|
</div>
|
|
|
<div v-if="deviceType == 'bundleSpyDayReport'">
|
|
|
<div class="device-button-group">
|
|
|
- <div v-if="deviceType.startsWith('bundleSpyDayReport')" class="enter-detail"
|
|
|
- @click.stop="goBundleSpyDayReport()">
|
|
|
+ <div v-if="deviceType.startsWith('bundleSpyDayReport')" class="enter-detail" @click.stop="goBundleSpyDayReport()">
|
|
|
<send-outlined />
|
|
|
色谱仪报表分析
|
|
|
</div>
|
|
|
@@ -135,16 +148,21 @@
|
|
|
<FullscreenExitOutlined style="font-size: 18px" />
|
|
|
</div>
|
|
|
<!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
|
|
|
- <div v-if="deviceType.startsWith('location') && activeKey == '1'" class="location-form"
|
|
|
- style="position: absolute; z-index: 9999; top: 50px">
|
|
|
+ <div v-if="deviceType.startsWith('location') && activeKey == '1'" class="location-form" style="position: absolute; z-index: 9999; top: 50px">
|
|
|
<div class="location-form-item">
|
|
|
<span class="location-form-label">人员名称:</span>
|
|
|
<Input style="width: 200px" v-model:value="locationForm.strname" />
|
|
|
</div>
|
|
|
<div class="location-form-item">
|
|
|
<span class="location-form-label">所属部门:</span>
|
|
|
- <MTreeSelect style="width: 200px" v-model:value="locationForm.department" placeholder="请选择所属部门"
|
|
|
- api="/monitor/getDepartmentInfo" :virtual="false" :isGetPopupContainer="false" />
|
|
|
+ <MTreeSelect
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="locationForm.department"
|
|
|
+ placeholder="请选择所属部门"
|
|
|
+ api="/monitor/getDepartmentInfo"
|
|
|
+ :virtual="false"
|
|
|
+ :isGetPopupContainer="false"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="location-form-item">
|
|
|
<span class="location-form-label">分站名称:</span>
|
|
|
@@ -152,68 +170,91 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
|
|
|
- <a-tab-pane key="1" :tab="deviceType.startsWith('gasDay_normal')
|
|
|
- ? '当日巡检监测'
|
|
|
- : deviceType.startsWith('dustDayReport') ||
|
|
|
- deviceType.startsWith('dustDayReport') ||
|
|
|
- deviceType.startsWith('bundleDayReport') ||
|
|
|
- deviceType.startsWith('bundleSpyDayReport')
|
|
|
- ? '最新监测报表'
|
|
|
- : '实时监测'
|
|
|
- ">
|
|
|
- <template
|
|
|
- v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
|
|
|
- <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
|
|
|
- :scroll="scroll" :isAction="true" :isShowSelect="false">
|
|
|
+ <a-tab-pane
|
|
|
+ key="1"
|
|
|
+ :tab="
|
|
|
+ deviceType.startsWith('gasDay_normal')
|
|
|
+ ? '当日巡检监测'
|
|
|
+ : deviceType.startsWith('dustDayReport') ||
|
|
|
+ deviceType.startsWith('dustDayReport') ||
|
|
|
+ deviceType.startsWith('bundleDayReport') ||
|
|
|
+ deviceType.startsWith('bundleSpyDayReport')
|
|
|
+ ? '最新监测报表'
|
|
|
+ : '实时监测'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
|
|
|
+ <GroupMonitorTable
|
|
|
+ ref="MonitorDataTable"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :columnsType="`${deviceType}_monitor`"
|
|
|
+ :scroll="scroll"
|
|
|
+ :isAction="true"
|
|
|
+ :isShowSelect="false"
|
|
|
+ >
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
- ? [
|
|
|
- {
|
|
|
- label: '详情',
|
|
|
- onClick: goDetail.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- : [
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- " />
|
|
|
+ <TableAction
|
|
|
+ :actions="
|
|
|
+ haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ label: '详情',
|
|
|
+ onClick: goDetail.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ "
|
|
|
+ />
|
|
|
</template>
|
|
|
</GroupMonitorTable>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType == 'majorpath' && activeKey == '1'">
|
|
|
- <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }"
|
|
|
- :pagination="false"></a-table>
|
|
|
+ <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }" :pagination="false"></a-table>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
|
|
|
- <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
|
|
|
- :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
|
|
|
- title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
|
|
|
+ <MonitorTable
|
|
|
+ ref="monitorTable"
|
|
|
+ :columnsType="`${deviceType}_monitor`"
|
|
|
+ :deviceType="deviceType"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ design-scope="device_monitor"
|
|
|
+ :isShowActionColumn="true"
|
|
|
+ :isShowSelect="false"
|
|
|
+ title="设备监测"
|
|
|
+ :form-config="formConfig"
|
|
|
+ :scroll="{ y: scroll.y - 110 }"
|
|
|
+ >
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
- ? [
|
|
|
- {
|
|
|
- label: '详情',
|
|
|
- onClick: goDetail.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- : [
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- " />
|
|
|
+ <TableAction
|
|
|
+ :actions="
|
|
|
+ haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ label: '详情',
|
|
|
+ onClick: goDetail.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ "
|
|
|
+ />
|
|
|
</template>
|
|
|
<template #filterCell="{ column, record }">
|
|
|
<div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
|
|
|
@@ -229,30 +270,52 @@
|
|
|
</MonitorTable>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType.startsWith('location') && activeKey == '1'">
|
|
|
- <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
|
|
|
- :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
|
|
|
- title="设备监测" :scroll="{ y: scroll.y - 110 }" style="margin-top: 60px">
|
|
|
+ <MonitorTable
|
|
|
+ ref="monitorTable"
|
|
|
+ :columnsType="`${deviceType}_monitor`"
|
|
|
+ :deviceType="deviceType"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ design-scope="device_monitor"
|
|
|
+ :isShowActionColumn="true"
|
|
|
+ :isShowSelect="false"
|
|
|
+ title="设备监测"
|
|
|
+ :scroll="{ y: scroll.y - 110 }"
|
|
|
+ style="margin-top: 60px"
|
|
|
+ >
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction :actions="[
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]" />
|
|
|
+ <TableAction
|
|
|
+ :actions="[
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
</template>
|
|
|
</MonitorTable>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType.startsWith('vehicle') && activeKey == '1'">
|
|
|
- <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
|
|
|
- :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
|
|
|
- title="设备监测" :form-config="vehicleFormConfig" :scroll="{ y: scroll.y - 110 }">
|
|
|
+ <MonitorTable
|
|
|
+ ref="monitorTable"
|
|
|
+ :columnsType="`${deviceType}_monitor`"
|
|
|
+ :deviceType="deviceType"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ design-scope="device_monitor"
|
|
|
+ :isShowActionColumn="true"
|
|
|
+ :isShowSelect="false"
|
|
|
+ title="设备监测"
|
|
|
+ :form-config="vehicleFormConfig"
|
|
|
+ :scroll="{ y: scroll.y - 110 }"
|
|
|
+ >
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction :actions="[
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]" />
|
|
|
+ <TableAction
|
|
|
+ :actions="[
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
</template>
|
|
|
</MonitorTable>
|
|
|
</template>
|
|
|
@@ -261,15 +324,11 @@
|
|
|
<gaspatrolTable :tableData="gaspatrolData" @getSearch="getSearch" @locate="goLocation"></gaspatrolTable>
|
|
|
</template>
|
|
|
<!-- 瓦斯日报 -->
|
|
|
- <template
|
|
|
- v-else-if="deviceType.startsWith('gasDayReport') && activeKey == '1' && glob.sysOrgCode != 'sdmtjtbetmk'">
|
|
|
- <gasReport :tableData="reportTableData" @getSearchReport="getSearchReport" @locate="goLocation">
|
|
|
- </gasReport>
|
|
|
+ <template v-else-if="deviceType.startsWith('gasDayReport') && activeKey == '1' && glob.sysOrgCode != 'sdmtjtbetmk'">
|
|
|
+ <gasReport :tableData="reportTableData" @getSearchReport="getSearchReport" @locate="goLocation"> </gasReport>
|
|
|
</template>
|
|
|
- <template
|
|
|
- v-else-if="deviceType.startsWith('gasDayReport') && activeKey == '1' && glob.sysOrgCode == 'sdmtjtbetmk'">
|
|
|
- <gasReportCount :tableData="reportTableData" @getSearchReport="getSearchReport" @locate="goLocation">
|
|
|
- </gasReportCount>
|
|
|
+ <template v-else-if="deviceType.startsWith('gasDayReport') && activeKey == '1' && glob.sysOrgCode == 'sdmtjtbetmk'">
|
|
|
+ <gasReportCount :tableData="reportTableData" @getSearchReport="getSearchReport" @locate="goLocation"> </gasReportCount>
|
|
|
</template>
|
|
|
<!-- 粉尘监测报表-->
|
|
|
<template v-else-if="deviceType.startsWith('dustDayReport') && activeKey == '1'">
|
|
|
@@ -290,70 +349,99 @@
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- 工作面echarts图标 -->
|
|
|
- <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
|
|
|
- xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
|
|
|
- :chartsColumns="surfaceChartsColumns" :option="echatsOption" />
|
|
|
- <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
|
|
|
- :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
|
|
|
- title="设备监测" :scroll="{ y: scroll.y - 30 }">
|
|
|
+ <BarAndLine
|
|
|
+ v-if="activeKey == '1' && deviceType == 'surface_history'"
|
|
|
+ class="echarts-line"
|
|
|
+ xAxisPropType="time"
|
|
|
+ :dataSource="surfaceEchartsData"
|
|
|
+ height="300px"
|
|
|
+ :chartsColumns="surfaceChartsColumns"
|
|
|
+ :option="echatsOption"
|
|
|
+ />
|
|
|
+ <MonitorTable
|
|
|
+ v-else-if="activeKey == '1'"
|
|
|
+ ref="monitorTable"
|
|
|
+ :columnsType="`${deviceType}_monitor`"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ design-scope="device_monitor"
|
|
|
+ :isShowActionColumn="true"
|
|
|
+ :isShowSelect="false"
|
|
|
+ title="设备监测"
|
|
|
+ :scroll="{ y: scroll.y - 30 }"
|
|
|
+ >
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
- ? [
|
|
|
- {
|
|
|
- label: '详情',
|
|
|
- onClick: goDetail.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- : [
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]
|
|
|
- " />
|
|
|
+ <TableAction
|
|
|
+ :actions="
|
|
|
+ haveDetailArr.find((item) => deviceType.startsWith(item))
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ label: '详情',
|
|
|
+ onClick: goDetail.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ "
|
|
|
+ />
|
|
|
</template>
|
|
|
<template #filterCell="{ column, record }">
|
|
|
<template v-if="deviceType.startsWith('gate') || deviceType.startsWith('door')">
|
|
|
- <a-tag
|
|
|
- v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'"
|
|
|
- color="red">正在运行</a-tag>
|
|
|
+ <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>
|
|
|
+ color="default"
|
|
|
+ >关闭</a-tag
|
|
|
+ >
|
|
|
<a-tag
|
|
|
v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
|
|
|
- color="#46C66F">打开</a-tag>
|
|
|
+ color="#46C66F"
|
|
|
+ >打开</a-tag
|
|
|
+ >
|
|
|
<a-tag
|
|
|
v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
|
|
|
- color="#FF0000">点位异常</a-tag>
|
|
|
- <a-tag
|
|
|
- v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'"
|
|
|
- color="red">正在运行</a-tag>
|
|
|
+ color="#FF0000"
|
|
|
+ >点位异常</a-tag
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ color="default"
|
|
|
+ >关闭</a-tag
|
|
|
+ >
|
|
|
<a-tag
|
|
|
v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'"
|
|
|
- color="#46C66F">打开</a-tag>
|
|
|
+ color="#46C66F"
|
|
|
+ >打开</a-tag
|
|
|
+ >
|
|
|
<a-tag
|
|
|
v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'"
|
|
|
- color="#FF0000">点位异常</a-tag>
|
|
|
- <a-tag
|
|
|
- v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'"
|
|
|
- color="red">正在运行</a-tag>
|
|
|
- <a-tag
|
|
|
- v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1"
|
|
|
- color="default">关闭</a-tag>
|
|
|
- <a-tag
|
|
|
- v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'"
|
|
|
- color="#46C66F">打开</a-tag>
|
|
|
- <a-tag
|
|
|
- v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'"
|
|
|
- color="#FF0000">点位异常</a-tag>
|
|
|
+ color="#FF0000"
|
|
|
+ >点位异常</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
|
|
|
+ >正在运行</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
|
|
|
+ >关闭</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
|
|
|
+ >打开</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
|
|
|
+ >点位异常</a-tag
|
|
|
+ >
|
|
|
<template v-if="column.dataIndex === 'ndoortype'">
|
|
|
<span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
|
|
|
</template>
|
|
|
@@ -362,14 +450,13 @@
|
|
|
</template>
|
|
|
</template>
|
|
|
<template v-else-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>
|
|
|
+ <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-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>
|
|
|
@@ -387,19 +474,16 @@
|
|
|
<a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType.startsWith('gaspatrol')">
|
|
|
- <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')"
|
|
|
- color="green">{{
|
|
|
- record.deviceConnect_str
|
|
|
- }}</a-tag>
|
|
|
- <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')"
|
|
|
- color="red">{{
|
|
|
- record.deviceConnect_str
|
|
|
- }}</a-tag>
|
|
|
- </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 v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')" color="green">{{
|
|
|
+ record.deviceConnect_str
|
|
|
}}</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')" color="red">{{
|
|
|
+ record.deviceConnect_str
|
|
|
+ }}</a-tag>
|
|
|
+ </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
|
|
|
+ >
|
|
|
<template v-else-if="column.dataIndex === 'warnLevel'">
|
|
|
<a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
|
|
|
<a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
|
|
|
@@ -423,1653 +507,1671 @@
|
|
|
<HistoryBall :dataSource="dataSource"></HistoryBall>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <HistoryTable ref="historyTable" :sysId="systemID" :columns-type="`${deviceType}`"
|
|
|
- :device-type="deviceType" designScope="device-history" :scroll="scroll" />
|
|
|
+ <HistoryTable
|
|
|
+ ref="historyTable"
|
|
|
+ :sysId="systemID"
|
|
|
+ :columns-type="`${deviceType}`"
|
|
|
+ :device-type="deviceType"
|
|
|
+ designScope="device-history"
|
|
|
+ :scroll="scroll"
|
|
|
+ />
|
|
|
</template>
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
|
|
|
<div class="tab-item">
|
|
|
- <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
|
|
|
+ <AlarmHistoryTable
|
|
|
+ ref="alarmHistoryTable"
|
|
|
+ v-if="activeKey == '3'"
|
|
|
+ :sysId="systemID"
|
|
|
+ columns-type="alarm"
|
|
|
:device-type="deviceType"
|
|
|
:device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
|
|
|
- :scroll="scroll" designScope="alarm-history" />
|
|
|
+ :scroll="scroll"
|
|
|
+ designScope="alarm-history"
|
|
|
+ />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
|
|
|
<div class="tab-item">
|
|
|
- <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
|
|
|
- columns-type="operator_history" :device-type="deviceType"
|
|
|
+ <HandlerHistoryTable
|
|
|
+ ref="handlerHistoryTable"
|
|
|
+ v-if="activeKey == '4'"
|
|
|
+ :sysId="systemID"
|
|
|
+ columns-type="operator_history"
|
|
|
+ :device-type="deviceType"
|
|
|
:device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
|
|
|
- :scroll="scroll" designScope="operator-history" />
|
|
|
+ :scroll="scroll"
|
|
|
+ designScope="operator-history"
|
|
|
+ />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
|
|
|
- style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px" />
|
|
|
- <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
|
|
|
- :activeID="activeID" />
|
|
|
+ <mainPath
|
|
|
+ v-if="deviceType == 'majorpath'"
|
|
|
+ :dataSource="majorPathEchartsData"
|
|
|
+ style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px"
|
|
|
+ />
|
|
|
+ <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
|
|
|
-import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
|
|
|
-import {
|
|
|
- list,
|
|
|
- getDeviceList,
|
|
|
- getDeviceTypeList,
|
|
|
- devPosition,
|
|
|
- getDepartmentInfo,
|
|
|
- getExportUrl,
|
|
|
- queryNowGasInsInfo,
|
|
|
- queryNowGasSta,
|
|
|
- queryReportData,
|
|
|
- getListAll
|
|
|
-} from './device.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 stationTable from '../../../comment/stationTable.vue'
|
|
|
-import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
|
|
|
-import gasReport from '../../../comment/gasReport.vue'
|
|
|
-import gasReportCount from '../../../comment/gasReportCount.vue'
|
|
|
-import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
|
|
|
-import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
|
|
|
-import DustingTable from '../../../comment/DustingTable.vue';
|
|
|
-import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
|
|
|
-import HistoryBall from './modal/history-ball.vue';
|
|
|
-import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
|
|
|
-import { TableAction } from '/@/components/Table';
|
|
|
-import { SvgIcon } from '/@/components/Icon';
|
|
|
-import { getActions } from '/@/qiankun/state';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import { setDivHeight } from '/@/utils/event';
|
|
|
-import { render } from '/@/utils/common/renderUtils';
|
|
|
-import {
|
|
|
- majorColumns,
|
|
|
- haveSysDetailArr,
|
|
|
- haveDetailArr,
|
|
|
- haveHandlerArr,
|
|
|
- noWarningArr,
|
|
|
- surfaceChartsColumns,
|
|
|
- noHistoryArr,
|
|
|
- getMonitorComponent,
|
|
|
- vehicleFormConfig,
|
|
|
-} from './device.data';
|
|
|
-import mainPath from './modal/mainPath.vue';
|
|
|
-import { formConfig } from '../../../safetyMonitor/safety.data';
|
|
|
-import { getDictItemsByCode } from '/@/utils/dict';
|
|
|
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
-import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
|
|
|
-// import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
|
|
-import { nextTick } from 'vue';
|
|
|
-import { useMethods } from '/@/hooks/system/useMethods';
|
|
|
-import { useGo } from '/@/hooks/web/usePage';
|
|
|
-import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-
|
|
|
-//瓦斯巡检查询参数
|
|
|
-const addressData = ref(''); //巡检地点
|
|
|
-const personData = ref(''); //巡检员
|
|
|
-const instypeData = ref('2'); //巡检类型
|
|
|
-const classData = ref('night'); //巡检班次
|
|
|
-const gaspatrolData = ref<any[]>([]);
|
|
|
-const inspectJd = ref<any>('');
|
|
|
-const inspectList = reactive<any[]>([
|
|
|
- { label: '第一次巡检已检数', val: 0 },
|
|
|
- { label: '第一次巡检未检数', val: 0 },
|
|
|
- { label: '第二次巡检已检数', val: 0 },
|
|
|
- { label: '第二次巡检未检数', val: 0 },
|
|
|
-]);
|
|
|
-const stationData = ref<any[]>([])
|
|
|
-const glob = useGlobSetting();
|
|
|
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
|
|
|
-
|
|
|
-const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal } = getMonitorComponent();
|
|
|
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- pageData: {
|
|
|
- type: Object,
|
|
|
- default: () => { },
|
|
|
- },
|
|
|
-});
|
|
|
-const { handleExportXls } = useMethods();
|
|
|
-const go = useGo();
|
|
|
-const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '35',
|
|
|
- left: '30',
|
|
|
- right: '45',
|
|
|
- bottom: '25',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
-};
|
|
|
-const router = useRouter();
|
|
|
-
|
|
|
-const actions = getActions();
|
|
|
-// actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
-const locationForm = reactive({
|
|
|
- strname: '',
|
|
|
- department: '',
|
|
|
- stationname: '',
|
|
|
-});
|
|
|
-
|
|
|
-const safetymonitorForm = reactive({
|
|
|
- dataTypeName: '',
|
|
|
- strinstallpos: '',
|
|
|
-});
|
|
|
-
|
|
|
-const monitorTable = ref();
|
|
|
-const historyTable = ref();
|
|
|
-const alarmHistoryTable = ref();
|
|
|
-const handlerHistoryTable = ref();
|
|
|
-
|
|
|
-// const routerParam = ref('home') // 默认进来时首页
|
|
|
-const isRefresh = ref(true);
|
|
|
-// 模态框
|
|
|
-const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
-const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
-
|
|
|
-// const drawerHeight = ref(240) // 监测框最小高度
|
|
|
-const treeShow = ref(true); //是否显示树形菜单
|
|
|
-const tableShow = ref(true); //是否显示树形菜单
|
|
|
-const locationSettingShow = ref(false); //是否显示树形菜单
|
|
|
-const treeNodeTitle = ref(''); // 选中的树形标题
|
|
|
-
|
|
|
-const locationList = ref([]); //巷道定位图标显示列表
|
|
|
-const deviceList = ref<DeviceType[]>([]); //关联设备列表
|
|
|
-const deviceActive = ref('');
|
|
|
-const activeKey = ref('1'); // tab key
|
|
|
-const dataSource = shallowRef([]); // 实时监测数据
|
|
|
-const majorPathEchartsData = ref({}); // 关键路线echarts数据
|
|
|
-const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
|
|
|
-const activeID = ref(''); // 打开详情modal时监测的设备id
|
|
|
-const deviceType = ref(''); // 监测设备类型
|
|
|
-const systemType = ref('');
|
|
|
-const systemID = ref(''); // 系统监测时，系统id
|
|
|
-const selectedKeys = ref<string[]>([]);
|
|
|
-const expandedKeys = ref<string[]>([]);
|
|
|
-const scroll = reactive({
|
|
|
- y: 180,
|
|
|
-});
|
|
|
-const treeData = ref<TreeProps['treeData']>([]);
|
|
|
-let departmentInfo: Null | Object = null;
|
|
|
-let startMonitorTimer = 0;
|
|
|
-let searchReportParam = ref('gasDayNight')//瓦斯日报查询条件-非布尔台
|
|
|
-let searchReportParam1 = ref('gasDay1')//瓦斯日报查询条件-布尔台
|
|
|
-let reportTableData = ref<any[]>([])//瓦斯日报列表数据
|
|
|
-
|
|
|
-//树形菜单选择事件
|
|
|
-const onSelect: TreeProps['onSelect'] = (keys, e) => {
|
|
|
- deviceType.value = '';
|
|
|
- systemID.value = '';
|
|
|
- deviceList.value = [];
|
|
|
- const title = e.node.title; // 在
|
|
|
- if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
|
|
|
- systemType.value = e.node.parent.node.type;
|
|
|
- if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
|
|
|
- systemID.value = e.node.type;
|
|
|
- // 传递工作面id信息,用于定位
|
|
|
- go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
|
|
|
- } else {
|
|
|
- systemType.value = e.node.type;
|
|
|
- if (deviceType.value != e.node.type) deviceType.value = e.node.type;
|
|
|
- go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
|
|
|
- }
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- if (startMonitorTimer) {
|
|
|
- clearTimeout(startMonitorTimer);
|
|
|
- }
|
|
|
- dataSource.value = [];
|
|
|
- monitorTable.value.resetPagination()
|
|
|
- if (!startMonitorTimer) {
|
|
|
- startMonitorTimer = setTimeout(() => {
|
|
|
- expandedKeys.value = keys;
|
|
|
- selectedKeys.value = keys;
|
|
|
- treeNodeTitle.value = e.node.title;
|
|
|
+ import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
|
|
|
+ import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
|
|
|
+ import {
|
|
|
+ list,
|
|
|
+ getDeviceList,
|
|
|
+ getDeviceTypeList,
|
|
|
+ devPosition,
|
|
|
+ getDepartmentInfo,
|
|
|
+ getExportUrl,
|
|
|
+ queryNowGasInsInfo,
|
|
|
+ queryNowGasSta,
|
|
|
+ queryReportData,
|
|
|
+ getListAll,
|
|
|
+ } from './device.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 stationTable from '../../../comment/stationTable.vue';
|
|
|
+ import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
|
|
|
+ import gasReport from '../../../comment/gasReport.vue';
|
|
|
+ import gasReportCount from '../../../comment/gasReportCount.vue';
|
|
|
+ import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
|
|
|
+ import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
|
|
|
+ import DustingTable from '../../../comment/DustingTable.vue';
|
|
|
+ import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
|
|
|
+ import HistoryBall from './modal/history-ball.vue';
|
|
|
+ import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
|
|
|
+ import { TableAction } from '/@/components/Table';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { getActions } from '/@/qiankun/state';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import { setDivHeight } from '/@/utils/event';
|
|
|
+ import { render } from '/@/utils/common/renderUtils';
|
|
|
+ import {
|
|
|
+ majorColumns,
|
|
|
+ haveSysDetailArr,
|
|
|
+ haveDetailArr,
|
|
|
+ haveHandlerArr,
|
|
|
+ noWarningArr,
|
|
|
+ surfaceChartsColumns,
|
|
|
+ noHistoryArr,
|
|
|
+ getMonitorComponent,
|
|
|
+ vehicleFormConfig,
|
|
|
+ } from './device.data';
|
|
|
+ import mainPath from './modal/mainPath.vue';
|
|
|
+ import { formConfig } from '../../../safetyMonitor/safety.data';
|
|
|
+ import { getDictItemsByCode } from '/@/utils/dict';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
|
|
|
+ // import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
|
|
+ import { nextTick } from 'vue';
|
|
|
+ import { useMethods } from '/@/hooks/system/useMethods';
|
|
|
+ import { useGo } from '/@/hooks/web/usePage';
|
|
|
+ import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+
|
|
|
+ //瓦斯巡检查询参数
|
|
|
+ const addressData = ref(''); //巡检地点
|
|
|
+ const personData = ref(''); //巡检员
|
|
|
+ const instypeData = ref('2'); //巡检类型
|
|
|
+ const classData = ref('night'); //巡检班次
|
|
|
+ const gaspatrolData = ref<any[]>([]);
|
|
|
+ const inspectJd = ref<any>('');
|
|
|
+ const inspectList = reactive<any[]>([
|
|
|
+ { label: '第一次巡检已检数', val: 0 },
|
|
|
+ { label: '第一次巡检未检数', val: 0 },
|
|
|
+ { label: '第二次巡检已检数', val: 0 },
|
|
|
+ { label: '第二次巡检未检数', val: 0 },
|
|
|
+ ]);
|
|
|
+ const stationData = ref<any[]>([]);
|
|
|
+ const glob = useGlobSetting();
|
|
|
+ // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
|
|
|
+
|
|
|
+ const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal } = getMonitorComponent();
|
|
|
+ type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ pageData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const { handleExportXls } = useMethods();
|
|
|
+ const go = useGo();
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '35',
|
|
|
+ left: '30',
|
|
|
+ right: '45',
|
|
|
+ bottom: '25',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const actions = getActions();
|
|
|
+ // actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
+ const locationForm = reactive({
|
|
|
+ strname: '',
|
|
|
+ department: '',
|
|
|
+ stationname: '',
|
|
|
+ });
|
|
|
|
|
|
- if (e.node.children?.length < 1 && timer) {
|
|
|
+ const safetymonitorForm = reactive({
|
|
|
+ dataTypeName: '',
|
|
|
+ strinstallpos: '',
|
|
|
+ });
|
|
|
|
|
|
- getMonitor(true);
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
+ const monitorTable = ref();
|
|
|
+ const historyTable = ref();
|
|
|
+ const alarmHistoryTable = ref();
|
|
|
+ const handlerHistoryTable = ref();
|
|
|
+
|
|
|
+ // const routerParam = ref('home') // 默认进来时首页
|
|
|
+ const isRefresh = ref(true);
|
|
|
+ // 模态框
|
|
|
+ const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
+ const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
+
|
|
|
+ // const drawerHeight = ref(240) // 监测框最小高度
|
|
|
+ const treeShow = ref(true); //是否显示树形菜单
|
|
|
+ const tableShow = ref(true); //是否显示树形菜单
|
|
|
+ const locationSettingShow = ref(false); //是否显示树形菜单
|
|
|
+ const treeNodeTitle = ref(''); // 选中的树形标题
|
|
|
+
|
|
|
+ const locationList = ref([]); //巷道定位图标显示列表
|
|
|
+ const deviceList = ref<DeviceType[]>([]); //关联设备列表
|
|
|
+ const deviceActive = ref('');
|
|
|
+ const activeKey = ref('1'); // tab key
|
|
|
+ const dataSource = shallowRef([]); // 实时监测数据
|
|
|
+ const majorPathEchartsData = ref({}); // 关键路线echarts数据
|
|
|
+ const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
|
|
|
+ const activeID = ref(''); // 打开详情modal时监测的设备id
|
|
|
+ const deviceType = ref(''); // 监测设备类型
|
|
|
+ const systemType = ref('');
|
|
|
+ const systemID = ref(''); // 系统监测时，系统id
|
|
|
+ const selectedKeys = ref<string[]>([]);
|
|
|
+ const expandedKeys = ref<string[]>([]);
|
|
|
+ const scroll = reactive({
|
|
|
+ y: 180,
|
|
|
+ });
|
|
|
+ const treeData = ref<TreeProps['treeData']>([]);
|
|
|
+ let departmentInfo: Null | Object = null;
|
|
|
+ let startMonitorTimer = 0;
|
|
|
+ let searchReportParam = ref('gasDayNight'); //瓦斯日报查询条件-非布尔台
|
|
|
+ let searchReportParam1 = ref('gasDay1'); //瓦斯日报查询条件-布尔台
|
|
|
+ let reportTableData = ref<any[]>([]); //瓦斯日报列表数据
|
|
|
+
|
|
|
+ //树形菜单选择事件
|
|
|
+ const onSelect: TreeProps['onSelect'] = (keys, e) => {
|
|
|
+ deviceType.value = '';
|
|
|
+ systemID.value = '';
|
|
|
+ deviceList.value = [];
|
|
|
+ const title = e.node.title; // 在
|
|
|
+ if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
|
|
|
+ systemType.value = e.node.parent.node.type;
|
|
|
+ if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
|
|
|
+ systemID.value = e.node.type;
|
|
|
+ // 传递工作面id信息,用于定位
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
|
|
|
+ } else {
|
|
|
+ systemType.value = e.node.type;
|
|
|
+ if (deviceType.value != e.node.type) deviceType.value = e.node.type;
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
|
|
|
+ }
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ if (startMonitorTimer) {
|
|
|
+ clearTimeout(startMonitorTimer);
|
|
|
+ }
|
|
|
+ dataSource.value = [];
|
|
|
+ monitorTable.value.resetPagination();
|
|
|
+ if (!startMonitorTimer) {
|
|
|
+ startMonitorTimer = setTimeout(() => {
|
|
|
+ expandedKeys.value = keys;
|
|
|
+ selectedKeys.value = keys;
|
|
|
+ treeNodeTitle.value = e.node.title;
|
|
|
+
|
|
|
+ if (e.node.children?.length < 1 && timer) {
|
|
|
+ getMonitor(true);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ // activeKey.value = '1';
|
|
|
+ };
|
|
|
+
|
|
|
+ function tabChange(activeKeyVal) {
|
|
|
+ activeKey.value = activeKeyVal;
|
|
|
}
|
|
|
- // activeKey.value = '1';
|
|
|
-};
|
|
|
-
|
|
|
-function tabChange(activeKeyVal) {
|
|
|
- activeKey.value = activeKeyVal;
|
|
|
-}
|
|
|
-
|
|
|
-function showTree(flag, value) {
|
|
|
- if (flag == 'treeShow') treeShow.value = value;
|
|
|
- if (flag == 'location') locationSettingShow.value = value;
|
|
|
-}
|
|
|
-
|
|
|
-async function getDeviceType(sysType?) {
|
|
|
- if (treeData.value?.length > 0) return;
|
|
|
- const result = await getDeviceTypeList({});
|
|
|
- if (result.length > 0) {
|
|
|
- debugger;
|
|
|
- const dataSource = <TreeProps['treeData']>[];
|
|
|
- let key = '0';
|
|
|
- const getData = (resultList, dataSourceList, keyVal) => {
|
|
|
- resultList.forEach((item, index) => {
|
|
|
- if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
|
|
|
- const children = getData(item.children, [], `${keyVal}-${index}`);
|
|
|
- // 判断关键阻力路线
|
|
|
- if (item.itemValue.startsWith(sysType) && children[0]) {
|
|
|
- systemID.value = item.children[0]['itemValue'];
|
|
|
- }
|
|
|
|
|
|
- dataSourceList.push({
|
|
|
- children: children,
|
|
|
- title: item.itemText,
|
|
|
- key: `${keyVal}-${index}`,
|
|
|
- type: item.itemValue,
|
|
|
- parentKey: `${keyVal}`,
|
|
|
- });
|
|
|
- } else {
|
|
|
- dataSourceList.push({
|
|
|
- children: [],
|
|
|
- title: item.itemText,
|
|
|
- key: `${keyVal}-${index}`,
|
|
|
- type: item.itemValue,
|
|
|
- parentKey: `${keyVal}`,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- return dataSourceList;
|
|
|
- };
|
|
|
- treeData.value = getData(result, dataSource, key);
|
|
|
+ function showTree(flag, value) {
|
|
|
+ if (flag == 'treeShow') treeShow.value = value;
|
|
|
+ if (flag == 'location') locationSettingShow.value = value;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-// https获取监测数据
|
|
|
-let timer: null | NodeJS.Timeout = undefined;
|
|
|
-function getMonitor(flag?) {
|
|
|
- if (deviceType.value) {
|
|
|
- if (timer) timer = null;
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- if (deviceType.value.startsWith('gasDay_normal')) {
|
|
|
- await queryNowGasInsInfoList();//人工瓦斯巡检
|
|
|
- } else if (deviceType.value.startsWith('gasDayReport')) {
|
|
|
- let searchParams = glob.sysOrgCode == 'sdmtjtbetmk' ? searchReportParam1.value : searchReportParam.value
|
|
|
- await getSearchReport(searchParams)//瓦斯日报
|
|
|
- } else if (deviceType.value.startsWith('substation')) {//分站
|
|
|
- await getStationList()
|
|
|
+
|
|
|
+ async function getDeviceType(sysType?) {
|
|
|
+ if (treeData.value?.length > 0) return;
|
|
|
+ const result = await getDeviceTypeList({});
|
|
|
+ if (result.length > 0) {
|
|
|
+ const dataSource = <TreeProps['treeData']>[];
|
|
|
+ let key = '0';
|
|
|
+ const getData = (resultList, dataSourceList, keyVal) => {
|
|
|
+ resultList.forEach((item, index) => {
|
|
|
+ if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
|
|
|
+ const children = getData(item.children, [], `${keyVal}-${index}`);
|
|
|
+ // 判断关键阻力路线
|
|
|
+ if (item.itemValue.startsWith(sysType) && children[0]) {
|
|
|
+ systemID.value = item.children[0]['itemValue'];
|
|
|
+ }
|
|
|
+
|
|
|
+ dataSourceList.push({
|
|
|
+ children: children,
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ parentKey: `${keyVal}`,
|
|
|
+ });
|
|
|
} else {
|
|
|
- await getDataSource();
|
|
|
- }
|
|
|
- if (timer) {
|
|
|
- getMonitor();
|
|
|
+ dataSourceList.push({
|
|
|
+ children: [],
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ parentKey: `${keyVal}`,
|
|
|
+ });
|
|
|
}
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
+ });
|
|
|
+ return dataSourceList;
|
|
|
+ };
|
|
|
+ treeData.value = getData(result, dataSource, key);
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-async function getDataSource() {
|
|
|
- if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
|
|
|
- const res = await list({ devicetype: 'sys', systemID: systemID.value });
|
|
|
- const result = res.msgTxt;
|
|
|
- const deviceArr = <DeviceType[]>[];
|
|
|
- result.forEach((item) => {
|
|
|
- const data = item['datalist'].filter((data: any) => {
|
|
|
- const readData = data.readData;
|
|
|
- return Object.assign(data, readData);
|
|
|
- });
|
|
|
- if (item.type != 'sys') {
|
|
|
- if (item.type === 'majorpath') {
|
|
|
- deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
|
|
|
- majorPathEchartsData.value = item['datalist'][0];
|
|
|
- } else if (item.type.startsWith('surface_history')) {
|
|
|
- surfaceEchartsData.value = item['datalist'][0];
|
|
|
- deviceArr.unshift({
|
|
|
- deviceType: item.type,
|
|
|
- deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
- datalist: data,
|
|
|
- });
|
|
|
- } else {
|
|
|
- deviceArr.unshift({
|
|
|
- deviceType: item.type,
|
|
|
- deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
- datalist: data,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
|
|
|
- deviceList.value = deviceArr;
|
|
|
- if (deviceArr.length > 0) {
|
|
|
- // if (deviceArr[1]) {
|
|
|
- // deviceActive.value = deviceArr[1].deviceType
|
|
|
- // monitorChange(1)
|
|
|
- // } else {
|
|
|
- // deviceActive.value = deviceArr[0].deviceType
|
|
|
- // monitorChange(0)
|
|
|
- // }
|
|
|
- deviceActive.value = deviceArr[0].deviceType;
|
|
|
- monitorChange(0);
|
|
|
- }
|
|
|
- } else {
|
|
|
- let res = null;
|
|
|
- if (systemID.value) {
|
|
|
- res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
|
|
|
- if (res && res.msgTxt) {
|
|
|
- const result = res.msgTxt;
|
|
|
- result.forEach((item) => {
|
|
|
- const data = item['datalist'].filter((data: any) => {
|
|
|
- const readData = data.readData;
|
|
|
- return Object.assign(data, readData);
|
|
|
- });
|
|
|
- if (item.type != 'sys') {
|
|
|
- if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
|
|
|
- dataSource.value = item['datalist'][0]['paths'];
|
|
|
- majorPathEchartsData.value = item['datalist'][0];
|
|
|
- return;
|
|
|
- } else if (item.type == deviceType.value) {
|
|
|
- if (item.type == 'surface_history') {
|
|
|
- // 工作面图标数据
|
|
|
- surfaceEchartsData.value = item['datalist'][0];
|
|
|
- } else {
|
|
|
- dataSource.value = data;
|
|
|
- console.log('关联设备数据--------------->', data);
|
|
|
- }
|
|
|
- return;
|
|
|
+ // https获取监测数据
|
|
|
+ let timer: null | NodeJS.Timeout = undefined;
|
|
|
+ function getMonitor(flag?) {
|
|
|
+ if (deviceType.value) {
|
|
|
+ if (timer) timer = null;
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (deviceType.value.startsWith('gasDay_normal')) {
|
|
|
+ await queryNowGasInsInfoList(); //人工瓦斯巡检
|
|
|
+ } else if (deviceType.value.startsWith('gasDayReport')) {
|
|
|
+ let searchParams = glob.sysOrgCode == 'sdmtjtbetmk' ? searchReportParam1.value : searchReportParam.value;
|
|
|
+ await getSearchReport(searchParams); //瓦斯日报
|
|
|
+ } else if (deviceType.value.startsWith('substation')) {
|
|
|
+ //分站
|
|
|
+ await getStationList();
|
|
|
+ } else {
|
|
|
+ await getDataSource();
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- let resultData, searchForm;
|
|
|
- if (monitorTable.value) {
|
|
|
- const formData = monitorTable.value.getForm();
|
|
|
- searchForm = formData.getFieldsValue();
|
|
|
+ if (timer) {
|
|
|
+ getMonitor();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- if (monitorTable.value) {
|
|
|
- if (deviceType.value.startsWith('safetymonitor')) {
|
|
|
- resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
|
|
|
- } else if (deviceType.value.startsWith('location')) {
|
|
|
- if (!departmentInfo) {
|
|
|
- departmentInfo = await getDepartmentInfo({});
|
|
|
+ async function getDataSource() {
|
|
|
+ if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
|
|
|
+ const res = await list({ devicetype: 'sys', systemID: systemID.value });
|
|
|
+ const result = res.msgTxt;
|
|
|
+ const deviceArr = <DeviceType[]>[];
|
|
|
+ result.forEach((item) => {
|
|
|
+ const data = item['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (item.type != 'sys') {
|
|
|
+ if (item.type === 'majorpath') {
|
|
|
+ deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
|
|
|
+ majorPathEchartsData.value = item['datalist'][0];
|
|
|
+ } else if (item.type.startsWith('surface_history')) {
|
|
|
+ surfaceEchartsData.value = item['datalist'][0];
|
|
|
+ deviceArr.unshift({
|
|
|
+ deviceType: item.type,
|
|
|
+ deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
+ datalist: data,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ deviceArr.unshift({
|
|
|
+ deviceType: item.type,
|
|
|
+ deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
+ datalist: data,
|
|
|
+ });
|
|
|
}
|
|
|
- let department = null;
|
|
|
- if (departmentInfo && locationForm && locationForm['department']) {
|
|
|
- for (const key in departmentInfo) {
|
|
|
- const item = departmentInfo[key];
|
|
|
- if (item['id'] === locationForm['department']) {
|
|
|
- department = item;
|
|
|
- break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ deviceList.value = deviceArr;
|
|
|
+ if (deviceArr.length > 0) {
|
|
|
+ // if (deviceArr[1]) {
|
|
|
+ // deviceActive.value = deviceArr[1].deviceType
|
|
|
+ // monitorChange(1)
|
|
|
+ // } else {
|
|
|
+ // deviceActive.value = deviceArr[0].deviceType
|
|
|
+ // monitorChange(0)
|
|
|
+ // }
|
|
|
+ deviceActive.value = deviceArr[0].deviceType;
|
|
|
+ monitorChange(0);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let res = null;
|
|
|
+ if (systemID.value) {
|
|
|
+ res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
|
|
|
+ if (res && res.msgTxt) {
|
|
|
+ const result = res.msgTxt;
|
|
|
+ result.forEach((item) => {
|
|
|
+ const data = item['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (item.type != 'sys') {
|
|
|
+ if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
|
|
|
+ dataSource.value = item['datalist'][0]['paths'];
|
|
|
+ majorPathEchartsData.value = item['datalist'][0];
|
|
|
+ return;
|
|
|
+ } else if (item.type == deviceType.value) {
|
|
|
+ if (item.type == 'surface_history') {
|
|
|
+ // 工作面图标数据
|
|
|
+ surfaceEchartsData.value = item['datalist'][0];
|
|
|
+ } else {
|
|
|
+ dataSource.value = data;
|
|
|
+ console.log('关联设备数据--------------->', data);
|
|
|
+ }
|
|
|
+ return;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- resultData = await list({
|
|
|
- devicetype: deviceType.value,
|
|
|
- pagetype: 'normal',
|
|
|
- filterParams: {
|
|
|
- strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
- userName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
- userJson: department && department['name'] ? department['name'] : '',
|
|
|
- },
|
|
|
- });
|
|
|
- } else if (deviceType.value.startsWith('vehicle')) {
|
|
|
- resultData = await list({
|
|
|
- devicetype: deviceType.value,
|
|
|
- pagetype: 'normal',
|
|
|
- filterParams: {
|
|
|
- strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
- vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
- },
|
|
|
});
|
|
|
- } else {
|
|
|
- resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
}
|
|
|
} else {
|
|
|
- // 非安全监控
|
|
|
- resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
- }
|
|
|
- if (resultData && resultData.msgTxt) {
|
|
|
- const result = resultData.msgTxt[0];
|
|
|
- if (result) {
|
|
|
- const data = result['datalist'].filter((data: any) => {
|
|
|
- const readData = data.readData;
|
|
|
- return Object.assign(data, readData);
|
|
|
- });
|
|
|
+ let resultData, searchForm;
|
|
|
+ if (monitorTable.value) {
|
|
|
+ const formData = monitorTable.value.getForm();
|
|
|
+ searchForm = formData.getFieldsValue();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (monitorTable.value) {
|
|
|
if (deviceType.value.startsWith('safetymonitor')) {
|
|
|
- const resultData = <any[]>[];
|
|
|
- // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
|
|
|
- const dictCodes = getDictItemsByCode('safetynormal');
|
|
|
- if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
|
|
|
- for (let i = 0; i < dictCodes.length; i++) {
|
|
|
- const dict = dictCodes[i];
|
|
|
- data.forEach((item) => {
|
|
|
- if (dict['value'] == item['dataTypeName']) {
|
|
|
- resultData.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
|
|
|
+ } else if (deviceType.value.startsWith('location')) {
|
|
|
+ if (!departmentInfo) {
|
|
|
+ departmentInfo = await getDepartmentInfo({});
|
|
|
+ }
|
|
|
+ let department = null;
|
|
|
+ if (departmentInfo && locationForm && locationForm['department']) {
|
|
|
+ for (const key in departmentInfo) {
|
|
|
+ const item = departmentInfo[key];
|
|
|
+ if (item['id'] === locationForm['department']) {
|
|
|
+ department = item;
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- dataSource.value = resultData;
|
|
|
- } else {
|
|
|
- dataSource.value = data;
|
|
|
}
|
|
|
+ resultData = await list({
|
|
|
+ devicetype: deviceType.value,
|
|
|
+ pagetype: 'normal',
|
|
|
+ filterParams: {
|
|
|
+ strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
+ userName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
+ userJson: department && department['name'] ? department['name'] : '',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (deviceType.value.startsWith('vehicle')) {
|
|
|
+ resultData = await list({
|
|
|
+ devicetype: deviceType.value,
|
|
|
+ pagetype: 'normal',
|
|
|
+ filterParams: {
|
|
|
+ strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
+ vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
+ },
|
|
|
+ });
|
|
|
} else {
|
|
|
- let tableData: any[] = [];
|
|
|
- let noNetData: any[] = [];
|
|
|
- data.filter((el) => {
|
|
|
- if (el.netStatus == 1) {
|
|
|
- tableData.push(el);
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非安全监控
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
+ }
|
|
|
+ if (resultData && resultData.msgTxt) {
|
|
|
+ const result = resultData.msgTxt[0];
|
|
|
+ if (result) {
|
|
|
+ const data = result['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (deviceType.value.startsWith('safetymonitor')) {
|
|
|
+ const resultData = <any[]>[];
|
|
|
+ // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
|
|
|
+ const dictCodes = getDictItemsByCode('safetynormal');
|
|
|
+ if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
|
|
|
+ for (let i = 0; i < dictCodes.length; i++) {
|
|
|
+ const dict = dictCodes[i];
|
|
|
+ data.forEach((item) => {
|
|
|
+ if (dict['value'] == item['dataTypeName']) {
|
|
|
+ resultData.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ dataSource.value = resultData;
|
|
|
} else {
|
|
|
- noNetData.push(el);
|
|
|
+ dataSource.value = data;
|
|
|
}
|
|
|
- });
|
|
|
- dataSource.value = [...tableData, ...noNetData];
|
|
|
+ } else {
|
|
|
+ let tableData: any[] = [];
|
|
|
+ let noNetData: any[] = [];
|
|
|
+ data.filter((el) => {
|
|
|
+ if (el.netStatus == 1) {
|
|
|
+ tableData.push(el);
|
|
|
+ } else {
|
|
|
+ noNetData.push(el);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ dataSource.value = [...tableData, ...noNetData];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ dataSource.value = [];
|
|
|
}
|
|
|
} else {
|
|
|
dataSource.value = [];
|
|
|
}
|
|
|
- } else {
|
|
|
- dataSource.value = [];
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-//设备分站详情跳转
|
|
|
-function stationDetail(){
|
|
|
- const newPage = router.resolve({ path: '/safety/list/detail/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-
|
|
|
-function goLocation(record) {
|
|
|
- // debugger;
|
|
|
- if (record['deviceType'] == 'person_bd' || record['deviceType'] == 'car_bd') {
|
|
|
- actions.setGlobalState({ locationId: record.devNum, locationObj: null, pageObj: null, type: record['deviceType'].split('_')[0] });
|
|
|
- } else if (deviceType.value == 'bundleSpyDayReport' || deviceType.value == 'dustDayReport' || deviceType.value == 'bundleDayReport') {
|
|
|
- actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
- } else if (deviceType.value.startsWith('gasDay')) {
|
|
|
- actions.setGlobalState({ locationName: record.strInstallPos, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
- } else if (deviceType.value == 'gasDayReport') {
|
|
|
- actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
- } else if (deviceType.value.startsWith('substation')) {
|
|
|
- actions.setGlobalState({ locationId: record.id, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
- } else {
|
|
|
- if (deviceType.value.startsWith('location')) {
|
|
|
- actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'person' });
|
|
|
- } else if (deviceType.value.startsWith('vehicle')) {
|
|
|
- actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'car' });
|
|
|
+
|
|
|
+ //设备分站详情跳转
|
|
|
+ function stationDetail() {
|
|
|
+ const newPage = router.resolve({ path: '/safety/list/detail/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+
|
|
|
+ function goLocation(record) {
|
|
|
+ // debugger;
|
|
|
+ if (record['deviceType'] == 'person_bd' || record['deviceType'] == 'car_bd') {
|
|
|
+ actions.setGlobalState({ locationId: record.devNum, locationObj: null, pageObj: null, type: record['deviceType'].split('_')[0] });
|
|
|
+ } else if (deviceType.value == 'bundleSpyDayReport' || deviceType.value == 'dustDayReport' || deviceType.value == 'bundleDayReport') {
|
|
|
+ actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
+ } else if (deviceType.value.startsWith('gasDay')) {
|
|
|
+ actions.setGlobalState({ locationName: record.strInstallPos, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
+ } else if (deviceType.value == 'gasDayReport') {
|
|
|
+ actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
+ } else if (deviceType.value.startsWith('substation')) {
|
|
|
+ actions.setGlobalState({ locationId: record.id, locationObj: null, pageObj: null, type: record['deviceType'] });
|
|
|
} else {
|
|
|
- actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
|
|
|
+ if (deviceType.value.startsWith('location')) {
|
|
|
+ actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'person' });
|
|
|
+ } else if (deviceType.value.startsWith('vehicle')) {
|
|
|
+ actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'car' });
|
|
|
+ } else {
|
|
|
+ actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-//查询分站列表
|
|
|
-async function getStationList() {
|
|
|
- let res = await getListAll();
|
|
|
- res.forEach((el) => {
|
|
|
- el.key = el.id;
|
|
|
- el.linkstatusC = el.linkstatus ? '连接' : '断开';
|
|
|
- el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
|
|
|
- });
|
|
|
- stationData.value = res;
|
|
|
-}
|
|
|
-//查询当前各班瓦斯巡检信息
|
|
|
-async function queryNowGasInsInfoList() {
|
|
|
- let res = await queryNowGasInsInfo({
|
|
|
- address: addressData.value,
|
|
|
- userName: personData.value,
|
|
|
- insType: instypeData.value,
|
|
|
- class: classData.value,
|
|
|
- });
|
|
|
- console.log(res, '查询当前各班瓦斯巡检信息');
|
|
|
- if (res.length) {
|
|
|
- gaspatrolData.value = res;
|
|
|
- } else {
|
|
|
- gaspatrolData.value = [];
|
|
|
+
|
|
|
+ //查询分站列表
|
|
|
+ async function getStationList() {
|
|
|
+ let res = await getListAll();
|
|
|
+ res.forEach((el) => {
|
|
|
+ el.key = el.id;
|
|
|
+ el.linkstatusC = el.linkstatus ? '连接' : '断开';
|
|
|
+ el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
|
|
|
+ });
|
|
|
+ stationData.value = res;
|
|
|
}
|
|
|
-}
|
|
|
-//查询巡检弹窗信息
|
|
|
-async function getSearch(param) {
|
|
|
- addressData.value = param.address
|
|
|
- personData.value = param.userName
|
|
|
- instypeData.value = param.insType
|
|
|
- classData.value = param.class
|
|
|
- if (!param.insType) {
|
|
|
- message.warning('请选择巡检类型!');
|
|
|
- } else if (!param.class) {
|
|
|
- message.warning('请选择巡检班次!');
|
|
|
- } else {
|
|
|
- await queryNowGasInsInfoList()
|
|
|
- let res = await queryNowGasSta({ insType: param.insType, class: param.class });
|
|
|
- console.log(res, '巡检弹窗信息');
|
|
|
- if (res) {
|
|
|
- inspectJd.value = res.comRate || 0;
|
|
|
- inspectList[0].val = res.finishNum1 || 0;
|
|
|
- inspectList[1].val = res.missNum1 || 0;
|
|
|
- inspectList[2].val = res.finishNum2 || 0;
|
|
|
- inspectList[3].val = res.missNum2 || 0;
|
|
|
+ //查询当前各班瓦斯巡检信息
|
|
|
+ async function queryNowGasInsInfoList() {
|
|
|
+ let res = await queryNowGasInsInfo({
|
|
|
+ address: addressData.value,
|
|
|
+ userName: personData.value,
|
|
|
+ insType: instypeData.value,
|
|
|
+ class: classData.value,
|
|
|
+ });
|
|
|
+ console.log(res, '查询当前各班瓦斯巡检信息');
|
|
|
+ if (res.length) {
|
|
|
+ gaspatrolData.value = res;
|
|
|
+ } else {
|
|
|
+ gaspatrolData.value = [];
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-//查询瓦斯日报列表数据
|
|
|
-async function getSearchReport(param) {
|
|
|
- if (glob.sysOrgCode == 'sdmtjtbetmk') {
|
|
|
- searchReportParam1.value = param
|
|
|
- } else {
|
|
|
- searchReportParam.value = param
|
|
|
- }
|
|
|
- let res = await queryReportData({ type: param })
|
|
|
- console.log(res, '瓦斯日报列表')
|
|
|
- reportTableData.value = JSON.parse(res.content) || []
|
|
|
-}
|
|
|
-
|
|
|
-function goDetail(record?) {
|
|
|
- debugger;
|
|
|
- if (record) {
|
|
|
- activeID.value = record.deviceID;
|
|
|
- if (deviceType.value.startsWith('fiber')) {
|
|
|
- currentModal.value = FiberModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('dusting')) {
|
|
|
- currentModal.value = DustModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('bundletube')) {
|
|
|
- currentModal.value = BundleModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('firemon_normal')) {
|
|
|
- // currentModal.value = BundleModal;
|
|
|
- currentModal.value = WisdomBallModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('ballvalve')) {
|
|
|
- currentModal.value = BallvalveModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('atomizing')) {
|
|
|
- currentModal.value = AtomizingModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('gaspatrol')) {
|
|
|
- currentModal.value = GaspatrolModal;
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.indexOf('gate') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('window') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('windrect') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('fanmain') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode !== 'ymdnymdn') {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode == 'ymdnymdn') {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal1', query: { id: activeID.value, deviceType: record.deviceType } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('pressurefan') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('chamber') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('safetymonitor') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('pump') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('nitrogen') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('forcFan') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
+ //查询巡检弹窗信息
|
|
|
+ async function getSearch(param) {
|
|
|
+ addressData.value = param.address;
|
|
|
+ personData.value = param.userName;
|
|
|
+ instypeData.value = param.insType;
|
|
|
+ classData.value = param.class;
|
|
|
+ if (!param.insType) {
|
|
|
+ message.warning('请选择巡检类型!');
|
|
|
+ } else if (!param.class) {
|
|
|
+ message.warning('请选择巡检班次!');
|
|
|
} else {
|
|
|
- message.info('待开发。。。');
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (systemType.value.indexOf('sys_dongshi') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_obfurage') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_surface_caimei') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_surface_juejin') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_maintunnel_leather') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_surface_junya') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (systemType.value.indexOf('sys_nitrogen') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('forcFan') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
- } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
- const newPage = router.resolve({ path: '/grout-home', query: { id: systemID.value } });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
+ await queryNowGasInsInfoList();
|
|
|
+ let res = await queryNowGasSta({ insType: param.insType, class: param.class });
|
|
|
+ console.log(res, '巡检弹窗信息');
|
|
|
+ if (res) {
|
|
|
+ inspectJd.value = res.comRate || 0;
|
|
|
+ inspectList[0].val = res.finishNum1 || 0;
|
|
|
+ inspectList[1].val = res.missNum1 || 0;
|
|
|
+ inspectList[2].val = res.finishNum2 || 0;
|
|
|
+ inspectList[3].val = res.missNum2 || 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //查询瓦斯日报列表数据
|
|
|
+ async function getSearchReport(param) {
|
|
|
+ if (glob.sysOrgCode == 'sdmtjtbetmk') {
|
|
|
+ searchReportParam1.value = param;
|
|
|
} else {
|
|
|
- message.info('待开发。。。');
|
|
|
+ searchReportParam.value = param;
|
|
|
}
|
|
|
+ let res = await queryReportData({ type: param });
|
|
|
+ console.log(res, '瓦斯日报列表');
|
|
|
+ reportTableData.value = JSON.parse(res.content) || [];
|
|
|
}
|
|
|
-}
|
|
|
-function goGasDayReport() {
|
|
|
- const newPage = router.resolve({ path: '/gas/gas-report-inspect/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-function gogasDayReportHis() {
|
|
|
- const newPage = router.resolve({ path: '/gas/gasDayReport/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-function goDustDayReport() {
|
|
|
- const newPage = router.resolve({ path: '/dustDayReport/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-function goBundleDayReport() {
|
|
|
- const newPage = router.resolve({ path: '/bundleDayReport/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-function goBundleSpyDayReport() {
|
|
|
- const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
|
|
|
- window.open(newPage.href, '_blank');
|
|
|
-}
|
|
|
-function exportXls() {
|
|
|
- handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
|
|
|
-}
|
|
|
-
|
|
|
-function toHome() {
|
|
|
- deviceList.value = [];
|
|
|
- if (timer) clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- deviceType.value = '';
|
|
|
- go(glob.homePath);
|
|
|
-}
|
|
|
-
|
|
|
-function toHide() {
|
|
|
- tableShow.value = !tableShow.value;
|
|
|
- document.getElementById('monitorBox').addEventListener('animationend', () => {
|
|
|
- if (!tableShow.value) {
|
|
|
- document.getElementById('monitorBox').style.height = '0px';
|
|
|
+
|
|
|
+ function goDetail(record?) {
|
|
|
+ if (record) {
|
|
|
+ activeID.value = record.deviceID;
|
|
|
+ if (deviceType.value.startsWith('fiber')) {
|
|
|
+ currentModal.value = FiberModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('dusting')) {
|
|
|
+ currentModal.value = DustModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('bundletube')) {
|
|
|
+ currentModal.value = BundleModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('firemon_normal')) {
|
|
|
+ // currentModal.value = BundleModal;
|
|
|
+ currentModal.value = WisdomBallModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('ballvalve')) {
|
|
|
+ currentModal.value = BallvalveModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('atomizing')) {
|
|
|
+ currentModal.value = AtomizingModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('gaspatrol')) {
|
|
|
+ currentModal.value = GaspatrolModal;
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.indexOf('gate') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('window') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('windrect') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('fanmain') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode !== 'ymdnymdn') {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode == 'ymdnymdn') {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal1', query: { id: activeID.value, deviceType: record.deviceType } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('pressurefan') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('chamber') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('safetymonitor') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('pump') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('nitrogen') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('forcFan') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else {
|
|
|
+ message.info('待开发。。。');
|
|
|
+ }
|
|
|
} else {
|
|
|
- document.getElementById('monitorBox').style.height = '290px';
|
|
|
+ if (systemType.value.indexOf('sys_dongshi') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_obfurage') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_surface_caimei') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_surface_juejin') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_maintunnel_leather') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_surface_junya') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (systemType.value.indexOf('sys_nitrogen') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('forcFan') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else if (deviceType.value.indexOf('pulping') != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/grout-home', query: { id: systemID.value } });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ } else {
|
|
|
+ message.info('待开发。。。');
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
-}
|
|
|
+ }
|
|
|
+ function goGasDayReport() {
|
|
|
+ const newPage = router.resolve({ path: '/gas/gas-report-inspect/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+ function gogasDayReportHis() {
|
|
|
+ const newPage = router.resolve({ path: '/gas/gasDayReport/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+ function goDustDayReport() {
|
|
|
+ const newPage = router.resolve({ path: '/dustDayReport/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+ function goBundleDayReport() {
|
|
|
+ const newPage = router.resolve({ path: '/bundleDayReport/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+ function goBundleSpyDayReport() {
|
|
|
+ const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
|
|
|
+ window.open(newPage.href, '_blank');
|
|
|
+ }
|
|
|
+ function exportXls() {
|
|
|
+ handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
|
|
|
+ }
|
|
|
+
|
|
|
+ function toHome() {
|
|
|
+ deviceList.value = [];
|
|
|
+ if (timer) clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ deviceType.value = '';
|
|
|
+ go(glob.homePath);
|
|
|
+ }
|
|
|
|
|
|
-async function findTreeDataValue(obj) {
|
|
|
- const findDeviceType = (data: any[], obj, flag = true) => {
|
|
|
- return data.find((item: any) => {
|
|
|
- if (item.children.length > 0) {
|
|
|
- findDeviceType(item.children, obj);
|
|
|
+ function toHide() {
|
|
|
+ tableShow.value = !tableShow.value;
|
|
|
+ document.getElementById('monitorBox').addEventListener('animationend', () => {
|
|
|
+ if (!tableShow.value) {
|
|
|
+ document.getElementById('monitorBox').style.height = '0px';
|
|
|
+ } else {
|
|
|
+ document.getElementById('monitorBox').style.height = '290';
|
|
|
}
|
|
|
- // debugger;
|
|
|
- if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
|
|
|
- // debugger;
|
|
|
- if (item.type == obj.deviceid) {
|
|
|
- deviceType.value = 'sys';
|
|
|
- systemID.value = obj.deviceid;
|
|
|
- selectedKeys.value = [item.key];
|
|
|
- expandedKeys.value = [item.key];
|
|
|
- treeNodeTitle.value = item.title;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ async function findTreeDataValue(obj) {
|
|
|
+ const findDeviceType = (data: any[], obj, flag = true) => {
|
|
|
+ return data.find((item: any) => {
|
|
|
+ if (item.children.length > 0) {
|
|
|
+ findDeviceType(item.children, obj);
|
|
|
}
|
|
|
- } else {
|
|
|
- if (!flag) {
|
|
|
- if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
|
|
|
- deviceType.value = item.type;
|
|
|
+ // debugger;
|
|
|
+ if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
|
|
|
+ // debugger;
|
|
|
+ if (item.type == obj.deviceid) {
|
|
|
+ deviceType.value = 'sys';
|
|
|
+ systemID.value = obj.deviceid;
|
|
|
selectedKeys.value = [item.key];
|
|
|
expandedKeys.value = [item.key];
|
|
|
treeNodeTitle.value = item.title;
|
|
|
- return true;
|
|
|
}
|
|
|
- return false;
|
|
|
} else {
|
|
|
- if (obj.deviceType && item.type == obj.deviceType) {
|
|
|
- deviceType.value = item.type;
|
|
|
- selectedKeys.value = [item.key];
|
|
|
- expandedKeys.value = [item.key];
|
|
|
- treeNodeTitle.value = item.title;
|
|
|
- return true;
|
|
|
+ if (!flag) {
|
|
|
+ if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
|
|
|
+ deviceType.value = item.type;
|
|
|
+ selectedKeys.value = [item.key];
|
|
|
+ expandedKeys.value = [item.key];
|
|
|
+ treeNodeTitle.value = item.title;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ if (obj.deviceType && item.type == obj.deviceType) {
|
|
|
+ deviceType.value = item.type;
|
|
|
+ selectedKeys.value = [item.key];
|
|
|
+ expandedKeys.value = [item.key];
|
|
|
+ treeNodeTitle.value = item.title;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
}
|
|
|
- return false;
|
|
|
}
|
|
|
- }
|
|
|
- return false;
|
|
|
- });
|
|
|
- };
|
|
|
- const flag = findDeviceType(treeData.value, obj);
|
|
|
- if (!flag) {
|
|
|
- findDeviceType(treeData.value, obj, false);
|
|
|
- }
|
|
|
- // 无类型时
|
|
|
- if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
|
|
|
- const defaultData = treeData.value[0]['children'][0];
|
|
|
- if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
|
|
|
- selectedKeys.value = [defaultData.key as string];
|
|
|
- expandedKeys.value = [defaultData.key as string];
|
|
|
- treeNodeTitle.value = defaultData.title;
|
|
|
- }
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const flag = findDeviceType(treeData.value, obj);
|
|
|
+ if (!flag) {
|
|
|
+ findDeviceType(treeData.value, obj, false);
|
|
|
+ }
|
|
|
+ // 无类型时
|
|
|
+ if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
|
|
|
+ const defaultData = treeData.value[0]['children'][0];
|
|
|
+ if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
|
|
|
+ selectedKeys.value = [defaultData.key as string];
|
|
|
+ expandedKeys.value = [defaultData.key as string];
|
|
|
+ treeNodeTitle.value = defaultData.title;
|
|
|
+ }
|
|
|
|
|
|
- if (timer === undefined) {
|
|
|
- timer = null;
|
|
|
- await getDataSource();
|
|
|
- getMonitor(true);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function monitorChange(index) {
|
|
|
- dataSource.value = [];
|
|
|
- deviceActive.value = deviceList.value[index].deviceType;
|
|
|
- if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
|
|
|
- if (activeKey.value == '1' && monitorTable.value) {
|
|
|
- monitorTable.value.setLoading(true);
|
|
|
- dataSource.value = deviceList.value[index].datalist;
|
|
|
- }
|
|
|
- if (activeKey.value == '2' && historyTable.value) {
|
|
|
- historyTable.value.setLoading(true);
|
|
|
- }
|
|
|
- if (activeKey.value == '3' && alarmHistoryTable.value) {
|
|
|
- alarmHistoryTable.value.setLoading(true);
|
|
|
- }
|
|
|
- if (activeKey.value == '4' && handlerHistoryTable.value) {
|
|
|
- handlerHistoryTable.value.setLoading(true);
|
|
|
+ if (timer === undefined) {
|
|
|
+ timer = null;
|
|
|
+ await getDataSource();
|
|
|
+ getMonitor(true);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-/**
|
|
|
- * 设置巷道设备定位图标的显示与隐藏
|
|
|
- */
|
|
|
-function setLocation() {
|
|
|
- let locationStr = '';
|
|
|
- locationList.value.forEach((item: any) => {
|
|
|
- if (item.Visible) {
|
|
|
- locationStr = locationStr ? locationStr + ',' + item.value : item.value;
|
|
|
+
|
|
|
+ function monitorChange(index) {
|
|
|
+ dataSource.value = [];
|
|
|
+ deviceActive.value = deviceList.value[index].deviceType;
|
|
|
+ if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
|
|
|
+ if (activeKey.value == '1' && monitorTable.value) {
|
|
|
+ monitorTable.value.setLoading(true);
|
|
|
+ dataSource.value = deviceList.value[index].datalist;
|
|
|
}
|
|
|
- });
|
|
|
- actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
|
|
|
- setTimeout(() => {
|
|
|
- message.success('设置成功');
|
|
|
- }, 600);
|
|
|
-}
|
|
|
-
|
|
|
-// function clearMonitor() {
|
|
|
-// clearTimeout(timer);
|
|
|
-// timer = undefined;
|
|
|
-// if (startMonitorTimer) {
|
|
|
-// clearTimeout(startMonitorTimer);
|
|
|
-// }
|
|
|
-// dataSource.value = [];
|
|
|
-// startMonitorTimer = setTimeout(() => {
|
|
|
-// expandedKeys.value = keys;
|
|
|
-// selectedKeys.value = keys;
|
|
|
-// treeNodeTitle.value = e.node.title;
|
|
|
-// activeKey.value = '1';
|
|
|
-// timer = null;
|
|
|
-// if (e.node.children?.length < 1) {
|
|
|
-// getMonitor(true);
|
|
|
-// }
|
|
|
-// }, 1000);
|
|
|
-// }show
|
|
|
-
|
|
|
-watch(
|
|
|
- () => props.pageData,
|
|
|
- async (pageObj) => {
|
|
|
- isRefresh.value = false;
|
|
|
- if (!treeData.value || treeData.value?.length < 1) {
|
|
|
- await getDeviceType();
|
|
|
+ if (activeKey.value == '2' && historyTable.value) {
|
|
|
+ historyTable.value.setLoading(true);
|
|
|
+ }
|
|
|
+ if (activeKey.value == '3' && alarmHistoryTable.value) {
|
|
|
+ alarmHistoryTable.value.setLoading(true);
|
|
|
}
|
|
|
- nextTick(() => {
|
|
|
- isRefresh.value = true;
|
|
|
- debugger;
|
|
|
- // if (pageObj && pageObj.pageType && pageObj.pageType.startsWith('sys_')) {
|
|
|
- // findTreeDataValue({ deviceid: systemID.value });
|
|
|
- // } else {
|
|
|
- // findTreeDataValue({ deviceType: pageObj.pageType });
|
|
|
- // }
|
|
|
- findTreeDataValue(pageObj);
|
|
|
+ if (activeKey.value == '4' && handlerHistoryTable.value) {
|
|
|
+ handlerHistoryTable.value.setLoading(true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 设置巷道设备定位图标的显示与隐藏
|
|
|
+ */
|
|
|
+ function setLocation() {
|
|
|
+ let locationStr = '';
|
|
|
+ locationList.value.forEach((item: any) => {
|
|
|
+ if (item.Visible) {
|
|
|
+ locationStr = locationStr ? locationStr + ',' + item.value : item.value;
|
|
|
+ }
|
|
|
});
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-);
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- const pageObj = props.pageData;
|
|
|
- if (!pageObj) return;
|
|
|
- if (pageObj && pageObj.pageType) {
|
|
|
- if (pageObj.pageType.startsWith('sys_')) {
|
|
|
- await getDeviceType(pageObj.pageType);
|
|
|
- findTreeDataValue({ deviceType: pageObj.pageType, deviceid: pageObj.deviceid });
|
|
|
+ actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
|
|
|
+ setTimeout(() => {
|
|
|
+ message.success('设置成功');
|
|
|
+ }, 600);
|
|
|
+ }
|
|
|
+
|
|
|
+ // function clearMonitor() {
|
|
|
+ // clearTimeout(timer);
|
|
|
+ // timer = undefined;
|
|
|
+ // if (startMonitorTimer) {
|
|
|
+ // clearTimeout(startMonitorTimer);
|
|
|
+ // }
|
|
|
+ // dataSource.value = [];
|
|
|
+ // startMonitorTimer = setTimeout(() => {
|
|
|
+ // expandedKeys.value = keys;
|
|
|
+ // selectedKeys.value = keys;
|
|
|
+ // treeNodeTitle.value = e.node.title;
|
|
|
+ // activeKey.value = '1';
|
|
|
+ // timer = null;
|
|
|
+ // if (e.node.children?.length < 1) {
|
|
|
+ // getMonitor(true);
|
|
|
+ // }
|
|
|
+ // }, 1000);
|
|
|
+ // }show
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.pageData,
|
|
|
+ async (pageObj) => {
|
|
|
+ isRefresh.value = false;
|
|
|
+ if (!treeData.value || treeData.value?.length < 1) {
|
|
|
+ await getDeviceType();
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ isRefresh.value = true;
|
|
|
+ // if (pageObj && pageObj.pageType && pageObj.pageType.startsWith('sys_')) {
|
|
|
+ // findTreeDataValue({ deviceid: systemID.value });
|
|
|
+ // } else {
|
|
|
+ // findTreeDataValue({ deviceType: pageObj.pageType });
|
|
|
+ // }
|
|
|
+ findTreeDataValue(pageObj);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ const pageObj = props.pageData;
|
|
|
+ if (!pageObj) return;
|
|
|
+ if (pageObj && pageObj.pageType) {
|
|
|
+ if (pageObj.pageType.startsWith('sys_')) {
|
|
|
+ await getDeviceType(pageObj.pageType);
|
|
|
+ findTreeDataValue({ deviceType: pageObj.pageType, deviceid: pageObj.deviceid });
|
|
|
+ } else {
|
|
|
+ await getDeviceType();
|
|
|
+ findTreeDataValue({ deviceType: pageObj.pageType });
|
|
|
+ }
|
|
|
} else {
|
|
|
await getDeviceType();
|
|
|
- findTreeDataValue({ deviceType: pageObj.pageType });
|
|
|
+ findTreeDataValue({ deviceid: pageObj.deviceid });
|
|
|
+ }
|
|
|
+ // 定位
|
|
|
+ const posShowData = pageObj.locationPlane;
|
|
|
+ if (posShowData) {
|
|
|
+ locationList.value = posShowData;
|
|
|
+ } else {
|
|
|
+ locationList.value = await devPosition({});
|
|
|
}
|
|
|
- } else {
|
|
|
- await getDeviceType();
|
|
|
- findTreeDataValue({ deviceid: pageObj.deviceid });
|
|
|
- }
|
|
|
- // 定位
|
|
|
- const posShowData = pageObj.locationPlane;
|
|
|
- if (posShowData) {
|
|
|
- locationList.value = posShowData;
|
|
|
- } else {
|
|
|
- locationList.value = await devPosition({});
|
|
|
- }
|
|
|
|
|
|
- // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
|
|
|
-});
|
|
|
+ // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
|
|
|
+ });
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- }
|
|
|
- timer = undefined;
|
|
|
-});
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ timer = undefined;
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
-@import '/@/design/vent/modal.less';
|
|
|
-@ventSpace: zxm;
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .scene-box {
|
|
|
+ // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
|
|
|
+ // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
|
|
|
+ // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
|
|
|
+ // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
+ // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
|
|
|
+ // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
|
|
|
+ // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
|
|
|
+ // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
|
|
|
+ // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
+ // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
|
|
|
+ // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
|
|
|
+ // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
+ // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
|
|
|
+ // --tree-node-select: #0963c1;
|
|
|
+ // --tree-node-hover: #0f376ccc;
|
|
|
+ // --location-bottom-bg: #21324855;
|
|
|
+ // --location-bottom-border: #aed1ff4d;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-@{theme-deepblue} {
|
|
|
.scene-box {
|
|
|
- // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
|
|
|
- // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
|
|
|
- // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
|
|
|
- // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
- // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
|
|
|
- // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
|
|
|
- // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
|
|
|
- // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
|
|
|
- // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
- // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
|
|
|
- // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
|
|
|
- // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
- // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
|
|
|
- // --tree-node-select: #0963c1;
|
|
|
- // --tree-node-hover: #0f376ccc;
|
|
|
- // --location-bottom-bg: #21324855;
|
|
|
- // --location-bottom-border: #aed1ff4d;
|
|
|
+ --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
|
|
|
+ --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
|
|
|
+ --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
|
|
|
+ --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
|
|
|
+ --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
|
|
|
+ --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
|
|
|
+ --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
|
|
|
+ --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
|
|
|
+ --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
|
|
|
+ --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
|
|
|
+ --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
+ --image-tohome: url('/@/assets/images/vent/home/tohome.png');
|
|
|
+ --tree-node-select: #00b1c8;
|
|
|
+ --tree-node-hover: #00b1c855;
|
|
|
+ --location-bottom-bg: #00709955;
|
|
|
+ --location-bottom-border: #aef3ff4d;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.scene-box {
|
|
|
- --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
|
|
|
- --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
|
|
|
- --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
|
|
|
- --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
|
|
|
- --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
|
|
|
- --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
|
|
|
- --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
|
|
|
- --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
|
|
|
- --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
|
|
|
- --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
|
|
|
- --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
- --image-tohome: url('/@/assets/images/vent/home/tohome.png');
|
|
|
- --tree-node-select: #00b1c8;
|
|
|
- --tree-node-hover: #00b1c855;
|
|
|
- --location-bottom-bg: #00709955;
|
|
|
- --location-bottom-border: #aef3ff4d;
|
|
|
-}
|
|
|
-
|
|
|
-.top-header {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- background: var(--image-modal-top);
|
|
|
- text-align: center;
|
|
|
- line-height: 56px;
|
|
|
- font-size: 28px;
|
|
|
- color: #ffffffdd;
|
|
|
- font-weight: 600;
|
|
|
- z-index: 1;
|
|
|
- letter-spacing: 2px;
|
|
|
- font-size: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.select-node {
|
|
|
- position: fixed;
|
|
|
- top: 100px;
|
|
|
- left: 10px;
|
|
|
- color: var(--vent-font-color);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 22px;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-left: 10px;
|
|
|
+
|
|
|
+ .top-header {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: var(--image-modal-top);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ font-weight: 600;
|
|
|
+ z-index: 1;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-size: 30px;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.expansion-icon {
|
|
|
- background: var(--image-tree-icon-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- position: absolute;
|
|
|
- left: 190px;
|
|
|
- top: 25px;
|
|
|
+ .select-node {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 10px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 22px;
|
|
|
|
|
|
- &:hover {
|
|
|
- background: var(--image-tree-icon-hover-bg) no-repeat;
|
|
|
+ .title {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expansion-icon {
|
|
|
+ background: var(--image-tree-icon-bg) no-repeat;
|
|
|
background-size: contain;
|
|
|
+ position: absolute;
|
|
|
+ left: 190px;
|
|
|
+ top: 25px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-icon-hover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.device-select {
|
|
|
- width: 250px;
|
|
|
- height: 500px;
|
|
|
- background: var(--image-tree-bg) no-repeat;
|
|
|
- position: fixed;
|
|
|
- top: 100px;
|
|
|
- left: 10px;
|
|
|
- background-size: contain;
|
|
|
- pointer-events: auto;
|
|
|
- padding: 20px 10px 30px 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.inspect-info-xj {
|
|
|
- position: fixed;
|
|
|
- top: 100px;
|
|
|
- left: 250px;
|
|
|
- width: 320px;
|
|
|
- height: 272px;
|
|
|
- padding: 20px;
|
|
|
- background: url('@/assets/images/inspect-bg.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .info-xj-title {
|
|
|
- width: 230px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- padding-left: 50px;
|
|
|
- margin: 10px 0px;
|
|
|
- color: #fff;
|
|
|
- background: url('@/assets/images/inspect-title.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+
|
|
|
+ .device-select {
|
|
|
+ width: 250px;
|
|
|
+ height: 500px;
|
|
|
+ background: var(--image-tree-bg) no-repeat;
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 10px;
|
|
|
+ background-size: contain;
|
|
|
+ pointer-events: auto;
|
|
|
+ padding: 20px 10px 30px 10px;
|
|
|
}
|
|
|
|
|
|
- .info-xj-content {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- height: calc(100% - 56px);
|
|
|
- padding: 10px 0px;
|
|
|
+ .inspect-info-xj {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 250px;
|
|
|
+ width: 320px;
|
|
|
+ height: 272px;
|
|
|
+ padding: 20px;
|
|
|
+ background: url('@/assets/images/inspect-bg.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
- .xj-content-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- width: 126px;
|
|
|
- height: 67px;
|
|
|
- margin: 7px;
|
|
|
+ .info-xj-title {
|
|
|
+ width: 230px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding-left: 50px;
|
|
|
+ margin: 10px 0px;
|
|
|
color: #fff;
|
|
|
- padding-bottom: 5px;
|
|
|
- background: url('@/assets/images/inspect-item.png') no-repeat center;
|
|
|
+ background: url('@/assets/images/inspect-title.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .content-item-val {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #74e9fe;
|
|
|
+ .info-xj-content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100% - 56px);
|
|
|
+ padding: 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .xj-content-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ width: 126px;
|
|
|
+ height: 67px;
|
|
|
+ margin: 7px;
|
|
|
+ color: #fff;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ background: url('@/assets/images/inspect-item.png') no-repeat center;
|
|
|
+
|
|
|
+ .content-item-val {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #74e9fe;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.is-expansion-icon {
|
|
|
- padding: 5px;
|
|
|
- pointer-events: auto;
|
|
|
- z-index: 999;
|
|
|
-}
|
|
|
-
|
|
|
-.device-select-show {
|
|
|
- left: 10px;
|
|
|
- animation-name: treeShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.device-select-hide {
|
|
|
- left: -250px;
|
|
|
- animation-name: treeHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.node-select-show {
|
|
|
- width: 276px;
|
|
|
- height: 44px;
|
|
|
- background: var(--image-tree-expansion-bg) no-repeat;
|
|
|
- left: 10px;
|
|
|
- animation-name: treeShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 0;
|
|
|
- justify-content: flex-start;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: var(--image-tree-expansion-hover-bg) no-repeat;
|
|
|
+
|
|
|
+ .is-expansion-icon {
|
|
|
+ padding: 5px;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
|
|
|
- .put-away-icon {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- left: 4px;
|
|
|
+ .device-select-show {
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.node-select-hide {
|
|
|
- left: -400px;
|
|
|
- animation-name: treeHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.device-select-box {
|
|
|
- width: 208px;
|
|
|
- height: 450px;
|
|
|
- overflow-y: auto;
|
|
|
- color: var(--vent-font-color);
|
|
|
-
|
|
|
- :deep(.zxm-tree) {
|
|
|
- background: transparent !important;
|
|
|
- color: var(--vent-font-color) !important;
|
|
|
-
|
|
|
- .zxm-tree-switcher {
|
|
|
- background: transparent !important;
|
|
|
- }
|
|
|
|
|
|
- .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
|
|
|
- background-color: var(--tree-node-select);
|
|
|
- }
|
|
|
+ .device-select-hide {
|
|
|
+ left: -250px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ }
|
|
|
|
|
|
- .zxm-tree-node-content-wrapper:hover {
|
|
|
- background-color: var(--tree-node-hover);
|
|
|
+ .node-select-show {
|
|
|
+ width: 276px;
|
|
|
+ height: 44px;
|
|
|
+ background: var(--image-tree-expansion-bg) no-repeat;
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 0;
|
|
|
+ justify-content: flex-start;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-expansion-hover-bg) no-repeat;
|
|
|
}
|
|
|
|
|
|
- input {
|
|
|
- height: 0px !important;
|
|
|
+ .put-away-icon {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ left: 4px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- background: #ededed22;
|
|
|
- height: 100px;
|
|
|
+ .node-select-hide {
|
|
|
+ left: -400px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
}
|
|
|
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background: #4288a444;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.location-icon {
|
|
|
- width: 46px;
|
|
|
- height: 178px;
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- background: var(--image-location-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- writing-mode: vertical-lr;
|
|
|
- line-height: 46px;
|
|
|
- color: var(--vent-font-color);
|
|
|
- padding-top: 10px;
|
|
|
- pointer-events: auto;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: var(--image-location-hover-bg) no-repeat;
|
|
|
- }
|
|
|
+ .device-select-box {
|
|
|
+ width: 208px;
|
|
|
+ height: 450px;
|
|
|
+ overflow-y: auto;
|
|
|
+ color: var(--vent-font-color);
|
|
|
|
|
|
- .location-text {
|
|
|
- padding-top: 20px;
|
|
|
- letter-spacing: 3px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-}
|
|
|
+ :deep(.zxm-tree) {
|
|
|
+ background: transparent !important;
|
|
|
+ color: var(--vent-font-color) !important;
|
|
|
|
|
|
-.location-select {
|
|
|
- position: fixed;
|
|
|
- top: 100px;
|
|
|
- pointer-events: auto;
|
|
|
+ .zxm-tree-switcher {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
|
|
|
- .location-select-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+ .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
|
|
|
+ background-color: var(--tree-node-select);
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 230px;
|
|
|
- height: 500px;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: var(--image-tree-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- transform: rotateY(180deg);
|
|
|
- z-index: -1;
|
|
|
+ .zxm-tree-node-content-wrapper:hover {
|
|
|
+ background-color: var(--tree-node-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ height: 0px !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .location-top-title {
|
|
|
- color: var(--vent-font-color);
|
|
|
- position: absolute;
|
|
|
- width: 225px;
|
|
|
- height: 68px;
|
|
|
- background: var(--image-turn-location-top-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
- top: 5px;
|
|
|
- left: 5px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed22;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 18px;
|
|
|
- position: relative;
|
|
|
- top: -14px;
|
|
|
- right: 15px;
|
|
|
- }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #4288a444;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .location-expansion-icon {
|
|
|
- background: var(--image-tree-icon-cover-bg) no-repeat;
|
|
|
- background-size: contain;
|
|
|
+ .location-icon {
|
|
|
+ width: 46px;
|
|
|
+ height: 178px;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ background: var(--image-location-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ line-height: 46px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ padding-top: 10px;
|
|
|
+ pointer-events: auto;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-location-hover-bg) no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-text {
|
|
|
+ padding-top: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-select {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ .location-select-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
position: relative;
|
|
|
- left: 10px;
|
|
|
- top: -15px;
|
|
|
- padding: 5px;
|
|
|
|
|
|
- &:hover {
|
|
|
- background: var(--image-tree-icon-cover-hover-bg) no-repeat;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 230px;
|
|
|
+ height: 500px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: var(--image-tree-bg) no-repeat;
|
|
|
background-size: contain;
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .location-container {
|
|
|
- width: 200px;
|
|
|
- height: 390px;
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- top: 80px;
|
|
|
- left: 18px;
|
|
|
- overflow-y: auto;
|
|
|
+ .location-top-title {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ position: absolute;
|
|
|
+ width: 225px;
|
|
|
+ height: 68px;
|
|
|
+ background: var(--image-turn-location-top-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -14px;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .location-item {
|
|
|
- color: var(--vent-font-color);
|
|
|
- line-height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- // background-image: var(--vent-gas-list-item-bg-img);
|
|
|
- background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
|
|
|
- margin: 3px 0;
|
|
|
-
|
|
|
- .item-title {
|
|
|
- width: 80px;
|
|
|
- text-align: right;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
+ .location-expansion-icon {
|
|
|
+ background: var(--image-tree-icon-cover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ left: 10px;
|
|
|
+ top: -15px;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-icon-cover-hover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .location-bottom-btn {
|
|
|
- width: 100%;
|
|
|
- color: var(--vent-font-color);
|
|
|
+ .location-container {
|
|
|
+ width: 200px;
|
|
|
+ height: 390px;
|
|
|
+ position: absolute;
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 20px;
|
|
|
+ flex-direction: column;
|
|
|
+ top: 80px;
|
|
|
+ left: 18px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .location-item {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // background-image: var(--vent-gas-list-item-bg-img);
|
|
|
+ background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
|
|
|
+ margin: 3px 0;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
+ .location-bottom-btn {
|
|
|
width: 100%;
|
|
|
- background: var(--location-bottom-bg);
|
|
|
- border-radius: 3px;
|
|
|
- border: 1px solid var(--location-bottom-border);
|
|
|
- text-align: center;
|
|
|
- padding: 2px 0;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #00557422;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ background: var(--location-bottom-bg);
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid var(--location-bottom-border);
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #00557422;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.location-select-show {
|
|
|
- right: 240px;
|
|
|
- animation-name: locationShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.location-select-hide {
|
|
|
- right: -2px;
|
|
|
- animation-name: locationHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.location-btn-show {
|
|
|
- right: -0px;
|
|
|
- animation-name: locationBtnShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.location-btn-hide {
|
|
|
- right: -240px;
|
|
|
- animation-name: locationBtnHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
-}
|
|
|
-
|
|
|
-.tabs-box {
|
|
|
- height: 290px;
|
|
|
-}
|
|
|
-
|
|
|
-.bottom-tabs-box {
|
|
|
- position: relative;
|
|
|
|
|
|
- .tabs-box {
|
|
|
- width: calc(100% - 12px) !important;
|
|
|
- bottom: 3px !important;
|
|
|
- background-color: red;
|
|
|
+ .location-select-show {
|
|
|
+ right: 240px;
|
|
|
+ animation-name: locationShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
}
|
|
|
|
|
|
- .to-small {
|
|
|
- position: absolute;
|
|
|
- top: -65px;
|
|
|
- right: 36px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .location-select-hide {
|
|
|
+ right: -2px;
|
|
|
+ animation-name: locationHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ }
|
|
|
|
|
|
- .to-home {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: var(--image-tohome) no-repeat center;
|
|
|
- background-size: auto;
|
|
|
- padding: 8px;
|
|
|
+ .location-btn-show {
|
|
|
+ right: -0px;
|
|
|
+ animation-name: locationBtnShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- background-color: rgba(79, 104, 134, 0.418);
|
|
|
- }
|
|
|
- }
|
|
|
+ .location-btn-hide {
|
|
|
+ right: -240px;
|
|
|
+ animation-name: locationBtnHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ }
|
|
|
|
|
|
- .table-show-icon {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- font-size: 30px;
|
|
|
- color: var(--vent-font-color);
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+ .tabs-box {
|
|
|
+ height: 290px;
|
|
|
}
|
|
|
|
|
|
- .device-button-group {
|
|
|
- position: absolute;
|
|
|
- top: -30px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
+ .bottom-tabs-box {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ width: calc(100% - 12px) !important;
|
|
|
+ bottom: 3px !important;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
|
|
|
- .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);
|
|
|
+ .to-small {
|
|
|
+ position: absolute;
|
|
|
+ top: -65px;
|
|
|
+ right: 36px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- color: var(--vent-font-color);
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- left: calc(-6px * 1);
|
|
|
- }
|
|
|
+ .to-home {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: var(--image-tohome) no-repeat center;
|
|
|
+ background-size: auto;
|
|
|
+ padding: 8px;
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- left: calc(-6px * 2);
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- left: calc(-6px * 3);
|
|
|
+ .table-show-icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(4) {
|
|
|
- left: calc(-6px * 4);
|
|
|
- }
|
|
|
+ .device-button-group {
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ .device-active {
|
|
|
+ background: linear-gradient(45deg, #04e6fb, #0c5cab);
|
|
|
|
|
|
- &:nth-child(5) {
|
|
|
- left: calc(-6px * 5);
|
|
|
+ &::before {
|
|
|
+ border-color: #0efcff;
|
|
|
+ box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(6) {
|
|
|
- left: calc(-6px * 6);
|
|
|
- }
|
|
|
+ .table-hide-icon {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(7) {
|
|
|
- left: calc(-6px * 7);
|
|
|
- }
|
|
|
+ .enter-detail {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 35px;
|
|
|
+ top: 35px;
|
|
|
+ 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: var(--vent-font-color);
|
|
|
+ padding: 5px 15px 5px 15px;
|
|
|
+ z-index: 999;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &:nth-child(8) {
|
|
|
- left: calc(-6px * 8);
|
|
|
+ &:hover {
|
|
|
+ background: var(--vent-device-manager-control-btn-hover);
|
|
|
}
|
|
|
|
|
|
- &:nth-child(9) {
|
|
|
- left: calc(-6px * 9);
|
|
|
+ &::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: var(--vent-device-manager-control-btn);
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(10) {
|
|
|
- left: calc(-6px * 10);
|
|
|
- }
|
|
|
+ .table-hide {
|
|
|
+ height: 0px;
|
|
|
+ animation-name: tableHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(11) {
|
|
|
- left: calc(-6px * 11);
|
|
|
- }
|
|
|
+ .table-show {
|
|
|
+ height: 290px;
|
|
|
+ animation-name: tableShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(12) {
|
|
|
- left: calc(-6px * 12);
|
|
|
- }
|
|
|
+ .location-form {
|
|
|
+ display: flex;
|
|
|
+ margin: 8px;
|
|
|
|
|
|
- &:nth-child(13) {
|
|
|
- left: calc(-6px * 13);
|
|
|
- }
|
|
|
+ .location-form-item {
|
|
|
+ width: 400px;
|
|
|
|
|
|
- &:nth-child(14) {
|
|
|
- left: calc(-6px * 14);
|
|
|
+ .location-form-label {
|
|
|
+ width: 100px;
|
|
|
+ display: inline-block;
|
|
|
+ color: var(--vent-font-color);
|
|
|
}
|
|
|
|
|
|
- &:nth-child(15) {
|
|
|
- left: calc(-6px * 15);
|
|
|
+ input {
|
|
|
+ background: transparent !important;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ border: 1px solid var(--vent-form-item-border) !important;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(16) {
|
|
|
- left: calc(-6px * 16);
|
|
|
- }
|
|
|
+ .zxm-select-selector {
|
|
|
+ width: 200px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(17) {
|
|
|
- left: calc(-6px * 17);
|
|
|
- }
|
|
|
+ @keyframes tableShow {
|
|
|
+ 0% {
|
|
|
+ height: 0px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(18) {
|
|
|
- left: calc(-6px * 18);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ height: 290px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(19) {
|
|
|
- left: calc(-6px * 19);
|
|
|
- }
|
|
|
+ @keyframes tableHide {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
- &:first-child {
|
|
|
- clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ height: 0px;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .device-active {
|
|
|
- background: linear-gradient(45deg, #04e6fb, #0c5cab);
|
|
|
+ @keyframes treeShow {
|
|
|
+ 0% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- border-color: #0efcff;
|
|
|
- box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .table-hide-icon {
|
|
|
- color: var(--vent-font-color);
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 10px;
|
|
|
- z-index: 9999;
|
|
|
+ @keyframes treeHide {
|
|
|
+ 0% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .enter-detail {
|
|
|
- color: var(--vent-font-color);
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 35px;
|
|
|
- top: 35px;
|
|
|
- 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: var(--vent-font-color);
|
|
|
- padding: 5px 15px 5px 15px;
|
|
|
- z-index: 999;
|
|
|
- cursor: pointer;
|
|
|
+ @keyframes locationShow {
|
|
|
+ 0% {
|
|
|
+ right: 0px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- background: var(--vent-device-manager-control-btn-hover);
|
|
|
+ 100% {
|
|
|
+ right: 240px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- width: calc(100% - 6px);
|
|
|
- height: 27px;
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 3px;
|
|
|
+ @keyframes locationHide {
|
|
|
+ 0% {
|
|
|
+ right: 240px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
right: 0;
|
|
|
- left: 3px;
|
|
|
- bottom: 0;
|
|
|
- z-index: -1;
|
|
|
- border-radius: inherit;
|
|
|
- /*important*/
|
|
|
- background: var(--vent-device-manager-control-btn);
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.table-hide {
|
|
|
- height: 0px;
|
|
|
- animation-name: tableHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s;
|
|
|
-}
|
|
|
-
|
|
|
-.table-show {
|
|
|
- height: 290px;
|
|
|
- animation-name: tableShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s;
|
|
|
-}
|
|
|
-
|
|
|
-.location-form {
|
|
|
- display: flex;
|
|
|
- margin: 8px;
|
|
|
-
|
|
|
- .location-form-item {
|
|
|
- width: 400px;
|
|
|
-
|
|
|
- .location-form-label {
|
|
|
- width: 100px;
|
|
|
- display: inline-block;
|
|
|
- color: var(--vent-font-color);
|
|
|
+
|
|
|
+ @keyframes locationBtnShow {
|
|
|
+ 0% {
|
|
|
+ right: -240px;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
|
|
|
- input {
|
|
|
- background: transparent !important;
|
|
|
- color: var(--vent-font-color);
|
|
|
- border: 1px solid var(--vent-form-item-border) !important;
|
|
|
+ 100% {
|
|
|
+ right: -2px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .zxm-select-selector {
|
|
|
- width: 200px !important;
|
|
|
- }
|
|
|
-}
|
|
|
+ @keyframes locationBtnHide {
|
|
|
+ 0% {
|
|
|
+ right: -2px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
-@keyframes tableShow {
|
|
|
- 0% {
|
|
|
- height: 0px;
|
|
|
- opacity: 0;
|
|
|
+ 100% {
|
|
|
+ right: -240px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- 100% {
|
|
|
- height: 290px;
|
|
|
- opacity: 1;
|
|
|
+ :deep(.@{ventSpace}-picker-datetime-panel) {
|
|
|
+ height: 200px !important;
|
|
|
+ overflow-y: auto !important;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes tableHide {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
+ :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ // overflow: auto;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- 100% {
|
|
|
- height: 0px;
|
|
|
- opacity: 0;
|
|
|
+ :deep(.zxm-select-dropdown) {
|
|
|
+ left: 0 !important;
|
|
|
+ color: #000000 !important;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@keyframes treeShow {
|
|
|
- 0% {
|
|
|
- left: -400px;
|
|
|
- opacity: 0;
|
|
|
+ :deep(.zxm-select-selector) {
|
|
|
+ height: 34px !important;
|
|
|
+ line-height: 34px !important;
|
|
|
}
|
|
|
|
|
|
- 100% {
|
|
|
- left: 10px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
+ :deep(.zxm-input) {
|
|
|
+ height: 32px !important;
|
|
|
+ line-height: 32px !important;
|
|
|
|
|
|
-@keyframes treeHide {
|
|
|
- 0% {
|
|
|
- left: 10px;
|
|
|
- opacity: 1;
|
|
|
+ .zxm-select-selection-item {
|
|
|
+ line-height: 32px !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- 100% {
|
|
|
- left: -400px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+ .device-button {
|
|
|
+ height: 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ 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);
|
|
|
+ &:nth-child(1) {
|
|
|
+ left: calc(-6px * 1);
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ left: calc(-6px * 2);
|
|
|
+ }
|
|
|
|
|
|
-@keyframes locationShow {
|
|
|
- 0% {
|
|
|
- right: 0px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ &:nth-child(3) {
|
|
|
+ left: calc(-6px * 3);
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- right: 240px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
+ &:nth-child(4) {
|
|
|
+ left: calc(-6px * 4);
|
|
|
+ }
|
|
|
|
|
|
-@keyframes locationHide {
|
|
|
- 0% {
|
|
|
- right: 240px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ &:nth-child(5) {
|
|
|
+ left: calc(-6px * 5);
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- right: 0;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+ &:nth-child(6) {
|
|
|
+ left: calc(-6px * 6);
|
|
|
+ }
|
|
|
|
|
|
-@keyframes locationBtnShow {
|
|
|
- 0% {
|
|
|
- right: -240px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ &:nth-child(7) {
|
|
|
+ left: calc(-6px * 7);
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- right: -2px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
+ &:nth-child(8) {
|
|
|
+ left: calc(-6px * 8);
|
|
|
+ }
|
|
|
|
|
|
-@keyframes locationBtnHide {
|
|
|
- 0% {
|
|
|
- right: -2px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ &:nth-child(9) {
|
|
|
+ left: calc(-6px * 9);
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- right: -240px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+ &:nth-child(10) {
|
|
|
+ left: calc(-6px * 10);
|
|
|
+ }
|
|
|
|
|
|
-:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- // overflow: auto;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ &:nth-child(11) {
|
|
|
+ left: calc(-6px * 11);
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select-dropdown) {
|
|
|
- left: 0 !important;
|
|
|
- color: #000000 !important;
|
|
|
-}
|
|
|
+ &:nth-child(12) {
|
|
|
+ left: calc(-6px * 12);
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select-selector) {
|
|
|
- height: 34px !important;
|
|
|
- line-height: 34px !important;
|
|
|
-}
|
|
|
+ &:nth-child(13) {
|
|
|
+ left: calc(-6px * 13);
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-input) {
|
|
|
- height: 32px !important;
|
|
|
- line-height: 32px !important;
|
|
|
+ &:nth-child(14) {
|
|
|
+ left: calc(-6px * 14);
|
|
|
+ }
|
|
|
|
|
|
- .zxm-select-selection-item {
|
|
|
- line-height: 32px !important;
|
|
|
+ &:nth-child(15) {
|
|
|
+ left: calc(-6px * 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(16) {
|
|
|
+ left: calc(-6px * 16);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(17) {
|
|
|
+ left: calc(-6px * 17);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(18) {
|
|
|
+ left: calc(-6px * 18);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(19) {
|
|
|
+ left: calc(-6px * 19);
|
|
|
+ }
|
|
|
+
|
|
|
+ // &:first-child {
|
|
|
+ // clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
|
|
|
+ // }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-// :deep(.@{ventSpace}-pagination){
|
|
|
-// margin-right: 20px !important;
|
|
|
-// margin-top: 5px !important;
|
|
|
-// display: flex;
|
|
|
-// align-items: center;
|
|
|
-// }</style>
|
|
|
+
|
|
|
+ // :deep(.@{ventSpace}-pagination){
|
|
|
+ // margin-right: 20px !important;
|
|
|
+ // margin-top: 5px !important;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // }
|
|
|
+</style>
|
