| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-08 20:17:16 |
| | | * @LastEditTime: 2024-11-12 18:31:08 |
| | | * @FilePath: \bigScreen\src\views\space\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import EventBus from 'utils/bus' |
| | | |
| | | import publicContent from "./publicContent.vue" |
| | | import { getList } from "@/api/space/space" |
| | | import { getDictionary } from "@/api/dict/dict" |
| | | import { nextTick, reactive } from "vue" |
| | | import { nextTick, onUnmounted, reactive } from "vue" |
| | | const SeachBarCondition = ref(null) |
| | | const loading = ref(false) |
| | | const TableContent = ref(null) |
| | | const curTableHeight = ref(0) |
| | | const curSelectTabType = ref('') |
| | | |
| | | // 搜索项配置 |
| | | const options = reactive({ |
| | |
| | | placeholder: '请输入名称', |
| | | changeSearch: true, |
| | | flex: 1, |
| | | }, |
| | | { |
| | | label: "类型", |
| | | type: "select", |
| | | props: "type", |
| | | data: [], |
| | | changeSearch: true, |
| | | clearable: true, |
| | | flex: 1, |
| | | }, |
| | | } |
| | | ] |
| | | }) |
| | | |
| | |
| | | total: 0, |
| | | } |
| | | |
| | | function positionColor () { |
| | | function positionColor() { |
| | | return (row) => { |
| | | if ( |
| | | (row.X && row.X != 0) || |
| | |
| | | } |
| | | } |
| | | |
| | | function positionDisabled () { |
| | | function positionDisabled() { |
| | | return (row) => { |
| | | if ( |
| | | (row.X && row.X != 0) || |
| | |
| | | curTableHeight.value = TableContent.value.offsetHeight |
| | | }) |
| | | |
| | | watch( |
| | | () => TableContent, |
| | | (newData) => { |
| | | console.log(newData.value?.clientHeight, 456465456) |
| | | }, |
| | | { |
| | | immediate: true, |
| | | deep: true |
| | | }) |
| | | |
| | | // 分页改变 |
| | | const handleCurrentChange = (val) => { |
| | | pages.page = val |
| | | getLists(SeachBarCondition.value.getSeachCondition()) |
| | | } |
| | | |
| | | // 获取下拉字典 |
| | | const getDictData = (code) => { |
| | | const param = { |
| | | code: code, |
| | | } |
| | | getDictionary(param).then((res) => { |
| | | options.columns[1].data = res.data.data.map(item => { |
| | | return { |
| | | label: item.dictValue, |
| | | value: item.dictKey |
| | | } |
| | | }) |
| | | |
| | | searchBtn(SeachBarCondition.value.getSeachCondition()) |
| | | }) |
| | | } |
| | | |
| | | // 查询分页数据 |
| | |
| | | param.current = pages.page |
| | | param.size = pages.pageSize |
| | | loading.value = true |
| | | getList(param) |
| | | getList({ |
| | | ...param, |
| | | type: curSelectTabType.value |
| | | }) |
| | | .then((res) => { |
| | | const data = res.data.data |
| | | tableData.value = data.records |
| | |
| | | }) |
| | | } |
| | | |
| | | // 行点击 |
| | | function rowClick (row) { |
| | | // 读取定位飞 |
| | | window.$viewer.zoomToPosition(new DC.Position( |
| | | Number(row.lng), |
| | | Number(row.lat), |
| | | 800, |
| | | 0, |
| | | -80, |
| | | 0 |
| | | ), () => { |
| | | }) |
| | | let state = reactive({ |
| | | layer: {} |
| | | }) |
| | | |
| | | // let layer = new DC.VectorLayer('layer') |
| | | |
| | | // 行点击 |
| | | function rowClick(row) { |
| | | |
| | | // if (state.layer) { |
| | | // window.$viewer.removeLayer(state.layer) |
| | | // } |
| | | // let layer = new DC.HtmlLayer(`${row.id}`) |
| | | // state.layer = layer |
| | | // window.$viewer.addLayer(layer) |
| | | // let positions = generatePosition(row.lng, row.lat) |
| | | // let material = new DC.PolylineDashMaterialProperty({ |
| | | // color: DC.Color.ORANGE |
| | | // }) |
| | | // positions.forEach(item => { |
| | | // let label = new DC.CustomLabel( |
| | | // item, |
| | | // row.name |
| | | // ) |
| | | // label.setStyle({ |
| | | // fillColor: DC.Color.YELLOW, |
| | | // font: '12px', |
| | | // pixelOffset: { x: 0, y: -10 } |
| | | // }) |
| | | // label.setVLine({ |
| | | // width: 2, |
| | | // material |
| | | // }) |
| | | // layer.addOverlay(label) |
| | | // }) |
| | | // let iconEl = `<div class="marsBlueGradientPnl"> |
| | | // <div>${row.name}</div> |
| | | // </div>` |
| | | // let divIcon = new DC.DivIcon( |
| | | // new DC.Position(row.lng, row.lat, 0), |
| | | // `<div class="public-map-popup"> |
| | | // ${iconEl} |
| | | // </div>` |
| | | // ) |
| | | // let incident = () => { } |
| | | // divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | // layer.addOverlay(divIcon) |
| | | |
| | | window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0)) |
| | | |
| | | } |
| | | function generatePosition (lng, lat) { |
| | | let list = [] |
| | | list.push(new DC.Position(lng, lat, 100)) |
| | | return list |
| | | } |
| | | |
| | | |
| | | // 查看详情 |
| | | function goDetail (row) { } |
| | | function goDetail(row) { } |
| | | |
| | | const searchBtn = (params) => { |
| | | resetPage() |
| | |
| | | getLists(SeachBarCondition.value.getSeachCondition()) |
| | | } |
| | | |
| | | getDictData("emergency_space_type") |
| | | const spaceTabChange = (type) => { |
| | | curSelectTabType.value = type |
| | | |
| | | nextTick(() => { |
| | | searchBtn(SeachBarCondition.value.getSeachCondition()) |
| | | }) |
| | | } |
| | | |
| | | EventBus.on('spaceTabChange', spaceTabChange) |
| | | |
| | | onUnmounted(() => { |
| | | EventBus.off('spaceTabChange', spaceTabChange) |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="w100 h0 flex-1 flex f-d-c"> |
| | | <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" |
| | | ref="SeachBarCondition"></global-search> |
| | | <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> |
| | | |
| | | <div class="h0 flex-1 table-content" ref="TableContent"> |
| | | <el-table :data="tableData" :height="curTableHeight" style="width: 100%" v-loading="loading"> |