添加卫星信息列表
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="卫星信息监控平台" />
|
||||
|
||||
<div class="main-content flex-1 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div class="row-span-2">3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<border-box-3>
|
||||
<scroll-board-table />
|
||||
</border-box-3>
|
||||
<border-box-3></border-box-3>
|
||||
<border-box-3 class="row-span-2"></border-box-3>
|
||||
<border-box-3></border-box-3>
|
||||
<border-box-3></border-box-3>
|
||||
</div>
|
||||
</full-screen-container>
|
||||
</template>
|
||||
|
|
@ -15,4 +17,6 @@
|
|||
<script lang="ts" setup>
|
||||
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
||||
import TheHeader from '../components/Layout/TheHeader.vue'
|
||||
import BorderBox3 from '../components/Layout/BorderBox3.vue'
|
||||
import ScrollBoardTable from '../components/ScrollBoardTable.vue'
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue