|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <tf-page>
|
|
|
+ <tf-page :gutter="false">
|
|
|
<template v-slot:action>
|
|
|
<QueryForm :selected="selected" :loading="loading" @query="onQuery" :types="types" />
|
|
|
</template>
|
|
|
@@ -18,7 +18,7 @@
|
|
|
:inactive-value="0"
|
|
|
:value="row.deviceState"
|
|
|
size="small"
|
|
|
- style="user-select:none"
|
|
|
+ style="user-select: none"
|
|
|
/>
|
|
|
</template>
|
|
|
</tf-table>
|
|
|
@@ -26,166 +26,166 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
|
|
|
-import QueryForm from './QueryForm.vue'
|
|
|
-import { elTableAlignLeft, getDefaultPagination } from '@/utils/constant'
|
|
|
-import { IPagination } from '@/api/common'
|
|
|
-import { ElTableColumn } from 'element-ui/types/table-column'
|
|
|
-import { historyPage, IWarningInfo, deviceTypePage, IDeviceType } from './api'
|
|
|
-import { getSiteIcon } from '@/views/spectrum/common/siteIcon/siteIcon' // 站点图标
|
|
|
-
|
|
|
-@Component({ name: 'Device', components: { QueryForm } })
|
|
|
-export default class Device extends Vue {
|
|
|
- @Prop({ type: Boolean, default: false }) isActive!: boolean
|
|
|
- teamCols: Partial<ElTableColumn>[] = [
|
|
|
- { type: 'selection', width: '50px' },
|
|
|
- { type: 'index', label: '序号', width: '60px' },
|
|
|
- { prop: 'partitionName', label: '排水分区', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'groupByName', label: '监测分组', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'deviceTypeName', label: '设备类型', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'deviceName', label: '设备名称', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'deviceCode', label: '设备编号', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'collectionDate', label: '采集数据时间', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'msgtype', label: '类型', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'targetName', label: '参数', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'checkValue', label: '检测值', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'warningName', label: '预警等级', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'upperLimit', label: '上限', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'lowerLimit', label: '下限', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'dateTime', label: '有效时段', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'handleStateName', label: '处理状态', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'handleUserName', label: '处理人', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
- { prop: 'handleTime', label: '处理时间', minWidth: '120px', ...elTableAlignLeft() }
|
|
|
- ]
|
|
|
-
|
|
|
- visible = false
|
|
|
-
|
|
|
- current: Partial<IWarningInfo> = {}
|
|
|
-
|
|
|
- selected: IWarningInfo[] = []
|
|
|
-
|
|
|
- histories: IWarningInfo[] = []
|
|
|
-
|
|
|
- types: IDeviceType[] = []
|
|
|
-
|
|
|
- loading = { query: false, export: false }
|
|
|
-
|
|
|
- pagination: IPagination = getDefaultPagination()
|
|
|
-
|
|
|
- query = {}
|
|
|
-
|
|
|
- onQuery(query) {
|
|
|
- this.query = { ...query }
|
|
|
- this.doQuery({ current: 1 })
|
|
|
- }
|
|
|
-
|
|
|
- async doQuery(query = {}) {
|
|
|
- this.loading.query = true
|
|
|
- try {
|
|
|
- const {
|
|
|
- result: { records, size, total, current }
|
|
|
- } = await historyPage({ ...this.pagination, ...this.query, ...query, ...this.$store.getters['project/id'] })
|
|
|
- this.pagination = { current, size, total }
|
|
|
- this.histories = records || []
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
+ import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
|
|
|
+ import QueryForm from './QueryForm.vue'
|
|
|
+ import { elTableAlignLeft, getDefaultPagination } from '@/utils/constant'
|
|
|
+ import { IPagination } from '@/api/common'
|
|
|
+ import { ElTableColumn } from 'element-ui/types/table-column'
|
|
|
+ import { historyPage, IWarningInfo, deviceTypePage, IDeviceType } from './api'
|
|
|
+ import { getSiteIcon } from '@/views/spectrum/common/siteIcon/siteIcon' // 站点图标
|
|
|
+
|
|
|
+ @Component({ name: 'Device', components: { QueryForm } })
|
|
|
+ export default class Device extends Vue {
|
|
|
+ @Prop({ type: Boolean, default: false }) isActive!: boolean
|
|
|
+ teamCols: Partial<ElTableColumn>[] = [
|
|
|
+ { type: 'selection', width: '50px' },
|
|
|
+ { type: 'index', label: '序号', width: '60px' },
|
|
|
+ { prop: 'partitionName', label: '排水分区', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'groupByName', label: '监测分组', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'deviceTypeName', label: '设备类型', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'deviceName', label: '设备名称', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'deviceCode', label: '设备编号', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'collectionDate', label: '采集数据时间', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'msgtype', label: '类型', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'targetName', label: '参数', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'checkValue', label: '检测值', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'warningName', label: '预警等级', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'upperLimit', label: '上限', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'lowerLimit', label: '下限', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'dateTime', label: '有效时段', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'handleStateName', label: '处理状态', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'handleUserName', label: '处理人', minWidth: '120px', ...elTableAlignLeft() },
|
|
|
+ { prop: 'handleTime', label: '处理时间', minWidth: '120px', ...elTableAlignLeft() }
|
|
|
+ ]
|
|
|
+
|
|
|
+ visible = false
|
|
|
+
|
|
|
+ current: Partial<IWarningInfo> = {}
|
|
|
+
|
|
|
+ selected: IWarningInfo[] = []
|
|
|
+
|
|
|
+ histories: IWarningInfo[] = []
|
|
|
+
|
|
|
+ types: IDeviceType[] = []
|
|
|
+
|
|
|
+ loading = { query: false, export: false }
|
|
|
+
|
|
|
+ pagination: IPagination = getDefaultPagination()
|
|
|
+
|
|
|
+ query = {}
|
|
|
+
|
|
|
+ onQuery(query) {
|
|
|
+ this.query = { ...query }
|
|
|
+ this.doQuery({ current: 1 })
|
|
|
}
|
|
|
- this.loading.query = false
|
|
|
- }
|
|
|
|
|
|
- onPageChange(pagination) {
|
|
|
- this.pagination = { ...this.pagination, ...pagination }
|
|
|
- this.doQuery()
|
|
|
- }
|
|
|
+ async doQuery(query = {}) {
|
|
|
+ this.loading.query = true
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ result: { records, size, total, current }
|
|
|
+ } = await historyPage({ ...this.pagination, ...this.query, ...query, ...this.$store.getters['project/id'] })
|
|
|
+ this.pagination = { current, size, total }
|
|
|
+ this.histories = records || []
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ this.loading.query = false
|
|
|
+ }
|
|
|
|
|
|
- onAdd() {
|
|
|
- this.current = {}
|
|
|
- this.visible = true
|
|
|
- }
|
|
|
+ onPageChange(pagination) {
|
|
|
+ this.pagination = { ...this.pagination, ...pagination }
|
|
|
+ this.doQuery()
|
|
|
+ }
|
|
|
|
|
|
- onUpdate(row) {
|
|
|
- this.current = { ...row }
|
|
|
- this.visible = true
|
|
|
- }
|
|
|
+ onAdd() {
|
|
|
+ this.current = {}
|
|
|
+ this.visible = true
|
|
|
+ }
|
|
|
|
|
|
- onExport(ids) {
|
|
|
- console.log(ids)
|
|
|
- }
|
|
|
+ onUpdate(row) {
|
|
|
+ this.current = { ...row }
|
|
|
+ this.visible = true
|
|
|
+ }
|
|
|
|
|
|
- onDblClick(row) {
|
|
|
- this.current = { ...row }
|
|
|
- this.visible = true
|
|
|
- console.log('row===>', row, this.current)
|
|
|
- let site = { ...row }
|
|
|
- site['siteState'] = 2
|
|
|
- let icon = getSiteIcon(site)
|
|
|
- let lon = site.longitude || null
|
|
|
- let lat = site.latitude || null
|
|
|
- if (!lon || !lat) {
|
|
|
- this.$message.warning('无坐标信息，无法显示！')
|
|
|
- return
|
|
|
+ onExport(ids) {
|
|
|
+ console.log(ids)
|
|
|
}
|
|
|
- let Cesium = (window as any).Cesium
|
|
|
- let viewer = (window as any).viewer
|
|
|
- let entity = viewer.entities.getById(site.id)
|
|
|
- if (!entity) {
|
|
|
- const position = Cesium.Cartesian3.fromDegrees(lon, lat, 0)
|
|
|
- entity = new Cesium.Entity({
|
|
|
- id: site.id,
|
|
|
- position: position,
|
|
|
- billboard: {
|
|
|
- image: icon,
|
|
|
- width: 40,
|
|
|
- height: 70,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- eyeOffset: Cesium.Cartesian3.ZERO
|
|
|
+
|
|
|
+ onDblClick(row) {
|
|
|
+ this.current = { ...row }
|
|
|
+ this.visible = true
|
|
|
+ console.log('row===>', row, this.current)
|
|
|
+ let site = { ...row }
|
|
|
+ site['siteState'] = 2
|
|
|
+ let icon = getSiteIcon(site)
|
|
|
+ let lon = site.longitude || null
|
|
|
+ let lat = site.latitude || null
|
|
|
+ if (!lon || !lat) {
|
|
|
+ this.$message.warning('无坐标信息，无法显示！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let Cesium = (window as any).Cesium
|
|
|
+ let viewer = (window as any).viewer
|
|
|
+ let entity = viewer.entities.getById(site.id)
|
|
|
+ if (!entity) {
|
|
|
+ const position = Cesium.Cartesian3.fromDegrees(lon, lat, 0)
|
|
|
+ entity = new Cesium.Entity({
|
|
|
+ id: site.id,
|
|
|
+ position: position,
|
|
|
+ billboard: {
|
|
|
+ image: icon,
|
|
|
+ width: 40,
|
|
|
+ height: 70,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ eyeOffset: Cesium.Cartesian3.ZERO
|
|
|
+ }
|
|
|
+ })
|
|
|
+ viewer.entities.add(entity)
|
|
|
+ }
|
|
|
+ viewer.flyTo(entity, {
|
|
|
+ offset: {
|
|
|
+ heading: Cesium.Math.toRadians(0.0),
|
|
|
+ pitch: Cesium.Math.toRadians(-25),
|
|
|
+ range: 3000
|
|
|
}
|
|
|
})
|
|
|
- viewer.entities.add(entity)
|
|
|
}
|
|
|
- viewer.flyTo(entity, {
|
|
|
- offset: {
|
|
|
- heading: Cesium.Math.toRadians(0.0),
|
|
|
- pitch: Cesium.Math.toRadians(-25),
|
|
|
- range: 3000
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
|
|
|
- onSelectionChange(selections) {
|
|
|
- this.selected = [...selections]
|
|
|
- }
|
|
|
+ onSelectionChange(selections) {
|
|
|
+ this.selected = [...selections]
|
|
|
+ }
|
|
|
|
|
|
- async getAllTypes() {
|
|
|
- try {
|
|
|
- const {
|
|
|
- result: { records }
|
|
|
- } = await deviceTypePage({ current: 1, size: 9999, ...this.$store.getters['project/id'] })
|
|
|
- this.types = records || []
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
+ async getAllTypes() {
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ result: { records }
|
|
|
+ } = await deviceTypePage({ current: 1, size: 9999, ...this.$store.getters['project/id'] })
|
|
|
+ this.types = records || []
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- preparing() {
|
|
|
- this.doQuery()
|
|
|
- this.getAllTypes()
|
|
|
- }
|
|
|
+ preparing() {
|
|
|
+ this.doQuery()
|
|
|
+ this.getAllTypes()
|
|
|
+ }
|
|
|
|
|
|
- mounted() {
|
|
|
- this.getAllTypes()
|
|
|
- }
|
|
|
+ mounted() {
|
|
|
+ this.getAllTypes()
|
|
|
+ }
|
|
|
|
|
|
- destroyed() {
|
|
|
- let viewer = (window as any).viewer
|
|
|
- viewer.entities.removeAll()
|
|
|
- }
|
|
|
+ destroyed() {
|
|
|
+ let viewer = (window as any).viewer
|
|
|
+ viewer.entities.removeAll()
|
|
|
+ }
|
|
|
|
|
|
- @Watch('isActive')
|
|
|
- refetchData(active: boolean) {
|
|
|
- if (active) {
|
|
|
- this.preparing()
|
|
|
+ @Watch('isActive')
|
|
|
+ refetchData(active: boolean) {
|
|
|
+ if (active) {
|
|
|
+ this.preparing()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
LR