添加卫星信息列表
parent
f528aaa905
commit
f6e7b8a89c
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="center-cmp">
|
||||||
|
<div class="cc-header">
|
||||||
|
<dv-decoration-1 style="width:200px;height:50px;" />
|
||||||
|
<div>机电设备总数</div>
|
||||||
|
<dv-decoration-1 style="width:200px;height:50px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cc-details">
|
||||||
|
<div class="card">2</div>
|
||||||
|
<div class="card">1</div>
|
||||||
|
<div class="card">3</div>
|
||||||
|
<div class="card">7</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cc-main-container">
|
||||||
|
<div class="ccmc-left">
|
||||||
|
<div class="station-info">
|
||||||
|
收费站<span>1315</span>
|
||||||
|
</div>
|
||||||
|
<div class="station-info">
|
||||||
|
监控中心<span>415</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dv-active-ring-chart class="ccmc-middle" :config="config" />
|
||||||
|
|
||||||
|
<div class="ccmc-right">
|
||||||
|
<div class="station-info">
|
||||||
|
<span>90</span>道路外场
|
||||||
|
</div>
|
||||||
|
<div class="station-info">
|
||||||
|
<span>317</span>其他
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LabelTag :config="labelConfig" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-3" ref="dom">
|
||||||
|
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||||
|
<polygon :fill="backgroundColor" :points="`
|
||||||
|
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
|
||||||
|
`" />
|
||||||
|
|
||||||
|
<polyline class="dv-bb3-line1"
|
||||||
|
:stroke="stroke"
|
||||||
|
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
|
||||||
|
/>
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:stroke="stroke"
|
||||||
|
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
|
||||||
|
/>
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:stroke="stroke"
|
||||||
|
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
|
||||||
|
/>
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:stroke="stroke"
|
||||||
|
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const stroke = '#2862b7'
|
||||||
|
const backgroundColor = 'transparent'
|
||||||
|
|
||||||
|
const dom = ref(null)
|
||||||
|
const width = ref(0)
|
||||||
|
const height = ref(0)
|
||||||
|
onMounted(() => {
|
||||||
|
width.value = dom.value.clientWidth
|
||||||
|
height.value = dom.value.clientHeight
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dv-border-box-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-border-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-border-svg-container> polyline {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb3-line1 {
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb3-line2 {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-decoration-1" ref="dom">
|
||||||
|
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||||
|
|
||||||
|
<template
|
||||||
|
v-for="(point, i) in points"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
v-if="Math.random() > 0.6"
|
||||||
|
:key="i"
|
||||||
|
:fill="mergedColor[0]"
|
||||||
|
:x="point[0] - halfPointSideLength"
|
||||||
|
:y="point[1] - halfPointSideLength"
|
||||||
|
:width="pointSideLength"
|
||||||
|
:height="pointSideLength"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
v-if="Math.random() > 0.6"
|
||||||
|
attributeName="fill"
|
||||||
|
:values="`${mergedColor[0]};transparent`"
|
||||||
|
dur="1s"
|
||||||
|
:begin="Math.random() * 2"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<rect
|
||||||
|
v-if="rects[0]"
|
||||||
|
:fill="mergedColor[1]"
|
||||||
|
:x="rects[0][0] - pointSideLength"
|
||||||
|
:y="rects[0][1] - pointSideLength"
|
||||||
|
:width="pointSideLength * 2"
|
||||||
|
:height="pointSideLength * 2"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="width"
|
||||||
|
:values="`0;${pointSideLength * 2}`"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="height"
|
||||||
|
:values="`0;${pointSideLength * 2}`"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="x"
|
||||||
|
:values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="y"
|
||||||
|
:values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<rect
|
||||||
|
v-if="rects[1]"
|
||||||
|
:fill="mergedColor[1]"
|
||||||
|
:x="rects[1][0] - 40"
|
||||||
|
:y="rects[1][1] - pointSideLength"
|
||||||
|
:width="40"
|
||||||
|
:height="pointSideLength * 2"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="width"
|
||||||
|
values="0;40;0"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="x"
|
||||||
|
:values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const pointSideLength = 2.5
|
||||||
|
const halfPointSideLength = pointSideLength / 2
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dv-decoration-1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-decoration-1 svg {
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-scroll-board" ref="dom">
|
||||||
|
<div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
|
||||||
|
<div
|
||||||
|
class="header-item"
|
||||||
|
v-for="(headerItem, i) in header"
|
||||||
|
:key="`${headerItem}${i}`"
|
||||||
|
:style="`
|
||||||
|
height: ${mergedConfig.headerHeight}px;
|
||||||
|
line-height: ${mergedConfig.headerHeight}px;
|
||||||
|
width: ${widths[i]}px;
|
||||||
|
`"
|
||||||
|
:align="aligns[i]"
|
||||||
|
v-html="headerItem"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="mergedConfig"
|
||||||
|
class="rows"
|
||||||
|
:style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="row-item"
|
||||||
|
v-for="(row, ri) in rows"
|
||||||
|
:key="`${row.toString()}${row.scroll}`"
|
||||||
|
:style="`
|
||||||
|
height: ${heights[ri]}px;
|
||||||
|
line-height: ${heights[ri]}px;
|
||||||
|
background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
|
||||||
|
`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ceil"
|
||||||
|
v-for="(ceil, ci) in row.ceils"
|
||||||
|
:key="`${ceil}${ri}${ci}`"
|
||||||
|
:style="`width: ${widths[ci]}px;`"
|
||||||
|
:align="aligns[ci]"
|
||||||
|
v-html="ceil"
|
||||||
|
@click="emitEvent('click', ri, ci, row, ceil)"
|
||||||
|
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||||
|
@mouseleave="handleHover(false)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
header: Array,
|
||||||
|
data: Array,
|
||||||
|
index: Boolean,
|
||||||
|
columnWidth: Array,
|
||||||
|
align: Array,
|
||||||
|
rowNum: Number,
|
||||||
|
headerBGC: String,
|
||||||
|
headerHeight: Number,
|
||||||
|
oddRowBGC: String,
|
||||||
|
evenRowBGC: String
|
||||||
|
})
|
||||||
|
|
||||||
|
const dom = ref(null)
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<div id="map-container" class="w-h-full"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
|
let map = null
|
||||||
|
const initMap = () => {
|
||||||
|
if (typeof(BMapGL) == 'undefined') {
|
||||||
|
alert('地图api加载失败')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
map = new BMapGL.Map('map-container', {
|
||||||
|
style: {
|
||||||
|
styleJson: styleJson2
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.centerAndZoom(new BMapGL.Point(79.068798, 39.868490), 11);
|
||||||
|
map.enableScrollWheelZoom(true);
|
||||||
|
map.setTilt(50);
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadPrism = () => {
|
||||||
|
if (!map) return
|
||||||
|
|
||||||
|
const bd = new BMapGL.Boundary();
|
||||||
|
bd.get('图木舒克', function (rs) {
|
||||||
|
const count = rs.boundaries.length;
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const path = [];
|
||||||
|
const str = rs.boundaries[i].replace(' ', '');
|
||||||
|
const points = str.split(';');
|
||||||
|
|
||||||
|
for (let j = 0; j < points.length; j++) {
|
||||||
|
const lng = points[j].split(',')[0];
|
||||||
|
const lat = points[j].split(',')[1];
|
||||||
|
path.push(new BMapGL.Point(lng, lat));
|
||||||
|
}
|
||||||
|
|
||||||
|
const prism = new BMapGL.Prism(path, 1000, {
|
||||||
|
topFillColor: '#5679ea',
|
||||||
|
topFillOpacity: 0.6,
|
||||||
|
sideFillColor: '#5679ea',
|
||||||
|
sideFillOpacity: 0.9
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addOverlay(prism);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMap()
|
||||||
|
loadPrism()
|
||||||
|
})
|
||||||
|
|
||||||
|
const update = () => console.log
|
||||||
|
|
||||||
|
defineExpose({ update })
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<div class="satellite-table overflow-hidden">
|
||||||
|
<div class="table-header flex">
|
||||||
|
<div
|
||||||
|
class="table-header-item leading-10 flex-1"
|
||||||
|
v-for="(headerItem, i) in header"
|
||||||
|
:key="`${headerItem}${i}`"
|
||||||
|
v-html="headerItem"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-body flex flex-col overflow-hidden">
|
||||||
|
<div
|
||||||
|
class="row-item flex"
|
||||||
|
v-for="(row, ri) in satellites"
|
||||||
|
:key="`${row.toString()}`"
|
||||||
|
:style="`
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
||||||
|
`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ceil flex-1"
|
||||||
|
v-for="(ceil, ci) in row"
|
||||||
|
:key="`${ceil}${ri}${ci}`"
|
||||||
|
v-html="ceil"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
|
const oddRowBGC = '#003B51'
|
||||||
|
const evenRowBGC = '#0A2732'
|
||||||
|
|
||||||
|
const header = ['#', '卫星编号', '仰角', '方位角', '载噪比']
|
||||||
|
const satellites = reactive([
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 2, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.table-header {
|
||||||
|
background-color: rgb(25, 129, 246);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,11 +3,13 @@
|
||||||
<TheHeader title="卫星信息监控平台" />
|
<TheHeader title="卫星信息监控平台" />
|
||||||
|
|
||||||
<div class="main-content flex-1 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
|
<div class="main-content flex-1 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
|
||||||
<div>1</div>
|
<border-box-3>
|
||||||
<div>2</div>
|
<scroll-board-table />
|
||||||
<div class="row-span-2">3</div>
|
</border-box-3>
|
||||||
<div>4</div>
|
<border-box-3></border-box-3>
|
||||||
<div>5</div>
|
<border-box-3 class="row-span-2"></border-box-3>
|
||||||
|
<border-box-3></border-box-3>
|
||||||
|
<border-box-3></border-box-3>
|
||||||
</div>
|
</div>
|
||||||
</full-screen-container>
|
</full-screen-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -15,4 +17,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
||||||
import TheHeader from '../components/Layout/TheHeader.vue'
|
import TheHeader from '../components/Layout/TheHeader.vue'
|
||||||
|
import BorderBox3 from '../components/Layout/BorderBox3.vue'
|
||||||
|
import ScrollBoardTable from '../components/ScrollBoardTable.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue