无人机组件
userName
parent
5e61eb12a9
commit
9ec43bf1c4
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { JiChangConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
title: '机场',
|
||||
unit: '处',
|
||||
dataset: 3,
|
||||
titleSize: 14,
|
||||
unitSize: 10,
|
||||
dataSize: 24,
|
||||
colors: ['#FFFFFF','#FF6F00','#FF6F00'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = JiChangConfig.key
|
||||
public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(JiChangConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="名称">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.title"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="单位">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.unit"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文字大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.titleSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.unitSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.dataSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const JiChangConfig: ConfigType = {
|
||||
key: 'JiChang',
|
||||
chartKey: 'VJiChang',
|
||||
conKey: 'VCJiChang',
|
||||
title: '机场',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'jichangbg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/equipment/jichangbg.png" />
|
||||
<div class="titlebox">{{ title }}</div>
|
||||
<div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
title,
|
||||
unit,
|
||||
dataset,
|
||||
titleSize,
|
||||
unitSize,
|
||||
dataSize,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.titlebox{
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: v-bind('colors[0]');
|
||||
font-size: v-bind('titleSize+"px"');
|
||||
}
|
||||
.valuebox{
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: v-bind('colors[1]');
|
||||
font-size: v-bind('dataSize+"px"');
|
||||
.unitbox{
|
||||
color: v-bind('colors[2]');
|
||||
font-size: v-bind('unitSize+"px"');
|
||||
margin-left: 3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { NowPositionConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
dataset: '',
|
||||
borderColor: '#457453',
|
||||
mapOptions:{
|
||||
"scene": {
|
||||
"center": {"lat":35.362625,"lng":118.033886,"alt":8306.3,"heading":360,"pitch":-45},
|
||||
"scene3DOnly": false,
|
||||
"shadows": false,
|
||||
"removeDblClick": true,
|
||||
"sceneMode": 3,
|
||||
"showSun": true,
|
||||
"showMoon": true,
|
||||
"showSkyBox": true,
|
||||
"showSkyAtmosphere": true,
|
||||
"fog": true,
|
||||
"fxaa": true,
|
||||
"requestRenderMode": true,
|
||||
"contextOptions": {
|
||||
"requestWebgl1": false,
|
||||
"webgl": {
|
||||
"preserveDrawingBuffer": true
|
||||
}
|
||||
},
|
||||
"globe": {
|
||||
"depthTestAgainstTerrain": false,
|
||||
"baseColor": "#546a53",
|
||||
"showGroundAtmosphere": true,
|
||||
"enableLighting": false
|
||||
},
|
||||
"cameraController": {
|
||||
"zoomFactor": 3.0,
|
||||
"minimumZoomDistance": 1,
|
||||
"maximumZoomDistance": 50000000,
|
||||
"enableRotate": true,
|
||||
"enableTranslate": true,
|
||||
"enableTilt": true,
|
||||
"enableZoom": true,
|
||||
"enableCollisionDetection": true,
|
||||
"minimumCollisionTerrainHeight": 15000
|
||||
}
|
||||
},
|
||||
"control": {
|
||||
"homeButton": false,
|
||||
"baseLayerPicker": false,
|
||||
"sceneModePicker": false,
|
||||
"vrButton": false,
|
||||
"fullscreenButton": false,
|
||||
"navigationHelpButton": false,
|
||||
"animation": false,
|
||||
"timeline": false,
|
||||
"infoBox": false,
|
||||
"geocoder": false,
|
||||
"selectionIndicator": false,
|
||||
"showRenderLoopErrors": false,
|
||||
"contextmenu": {
|
||||
"hasDefault": false
|
||||
},
|
||||
"mouseDownView": false,
|
||||
"zoom": {
|
||||
"insertIndex": 1
|
||||
},
|
||||
"compass": {
|
||||
"bottom": "toolbar",
|
||||
"left": "5px"
|
||||
},
|
||||
"distanceLegend": {
|
||||
"left": "10px",
|
||||
"bottom": "2px"
|
||||
},
|
||||
// "locationBar": {
|
||||
// "crs": "CGCS2000_GK_Zone_3",
|
||||
// "crsDecimal": 0,
|
||||
// "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"
|
||||
// }
|
||||
},
|
||||
"method": {
|
||||
"templateValues": {
|
||||
"dataServer": "//data.mars3d.cn",
|
||||
"gltfServerUrl": "//data.mars3d.cn/gltf"
|
||||
}
|
||||
},
|
||||
"terrain": {
|
||||
"url": "//data.mars3d.cn/terrain",
|
||||
"show": true,
|
||||
"clip": true
|
||||
},
|
||||
"basemaps": [
|
||||
{
|
||||
"id": 10,
|
||||
"name": "地图底图",
|
||||
"type": "group"
|
||||
},
|
||||
{
|
||||
"pid": 10,
|
||||
"name": "天地图影像",
|
||||
"icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
|
||||
"type": "group",
|
||||
"layers": [
|
||||
{
|
||||
"name": "底图",
|
||||
"type": "tdt",
|
||||
"layer": "img_d"
|
||||
},
|
||||
{
|
||||
"name": "注记",
|
||||
"type": "tdt",
|
||||
"layer": "img_z"
|
||||
}
|
||||
],
|
||||
"show": true
|
||||
}
|
||||
],
|
||||
"layers": []
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = NowPositionConfig.key
|
||||
public attr = { ...chartInitConfig, w: 343, h: 224, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(NowPositionConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.borderColor = option.borderColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const NowPositionConfig: ConfigType = {
|
||||
key: 'NowPosition',
|
||||
chartKey: 'VNowPosition',
|
||||
conKey: 'VCNowPosition',
|
||||
title: '实时位置',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'nowposition.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="go-title-03" ref="vChartRef" id="mars3dContainer"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { isArray } from '@/utils'
|
||||
import * as mars3d from "mars3d"
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
borderColor,
|
||||
mapOptions,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
let map: mars3d.Map; // 地图对象
|
||||
const isFirstLoad = ref(true);
|
||||
const vChartRef = ref<HTMLElement>()
|
||||
const initMap = (newData: any) => {
|
||||
// 第一次加载
|
||||
if(isFirstLoad.value){
|
||||
map = new mars3d.Map(vChartRef.value, newData);
|
||||
}else{ // 之后更新
|
||||
// map.setOptions(newData);
|
||||
map.setSceneOptions(newData.scene);
|
||||
}
|
||||
isFirstLoad.value = false;
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
const stopWatch = watch(
|
||||
() => props.chartConfig.option.mapOptions,
|
||||
async option => {
|
||||
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
||||
await nextTick();
|
||||
initMap(options);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
stopWatch()
|
||||
let arr = newData || [116.300467, 39.907761]
|
||||
map.flyTo({
|
||||
center: arr, // 中心点
|
||||
zoom: 18, // 缩放比例
|
||||
pitch: 0 // 倾斜度
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: v-bind('w');
|
||||
height: v-bind('h');
|
||||
border: 1px solid v-bind('borderColor')
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { WuRenJiConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
title: '无人机',
|
||||
unit: '台',
|
||||
dataset: 1,
|
||||
titleSize: 14,
|
||||
unitSize: 10,
|
||||
dataSize: 24,
|
||||
colors: ['#FFFFFF','#58FF95','#58FF95'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WuRenJiConfig.key
|
||||
public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(WuRenJiConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="名称">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.title"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="单位">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.unit"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文字大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.titleSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.unitSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.dataSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const WuRenJiConfig: ConfigType = {
|
||||
key: 'WuRenJi',
|
||||
chartKey: 'VWuRenJi',
|
||||
conKey: 'VCWuRenJi',
|
||||
title: '无人机',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'wurenjibg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/equipment/wurenjibg.png" />
|
||||
<div class="titlebox">{{ title }}</div>
|
||||
<div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
title,
|
||||
unit,
|
||||
dataset,
|
||||
titleSize,
|
||||
unitSize,
|
||||
dataSize,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.titlebox{
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: v-bind('colors[0]');
|
||||
font-size: v-bind('titleSize+"px"');
|
||||
}
|
||||
.valuebox{
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: v-bind('colors[1]');
|
||||
font-size: v-bind('dataSize+"px"');
|
||||
.unitbox{
|
||||
color: v-bind('colors[2]');
|
||||
font-size: v-bind('unitSize+"px"');
|
||||
margin-left: 3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ZhiShengJiConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
title: '直升机',
|
||||
unit: '架',
|
||||
dataset: 2,
|
||||
titleSize: 14,
|
||||
unitSize: 10,
|
||||
dataSize: 24,
|
||||
colors: ['#FFFFFF','#1180FF','#1180FF'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ZhiShengJiConfig.key
|
||||
public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ZhiShengJiConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="名称">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.title"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="单位">
|
||||
<SettingItem name="">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.unit"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="文字大小">
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.titleSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.unitSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.dataSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const ZhiShengJiConfig: ConfigType = {
|
||||
key: 'ZhiShengJi',
|
||||
chartKey: 'VZhiShengJi',
|
||||
conKey: 'VCZhiShengJi',
|
||||
title: '直升机',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'zhishengjibg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/equipment/zhishengjibg.png" />
|
||||
<div class="titlebox">{{ title }}</div>
|
||||
<div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
title,
|
||||
unit,
|
||||
dataset,
|
||||
titleSize,
|
||||
unitSize,
|
||||
dataSize,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.titlebox{
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: v-bind('colors[0]');
|
||||
font-size: v-bind('titleSize+"px"');
|
||||
}
|
||||
.valuebox{
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: v-bind('colors[1]');
|
||||
font-size: v-bind('dataSize+"px"');
|
||||
.unitbox{
|
||||
color: v-bind('colors[2]');
|
||||
font-size: v-bind('unitSize+"px"');
|
||||
margin-left: 3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,6 +14,10 @@ import { EquipmentIcons01Config } from './EquipmentIcons01/index';
|
|||
import { EquipmentIcons02Config } from './EquipmentIcons02/index';
|
||||
import { EquipmentIcons03Config } from './EquipmentIcons03/index';
|
||||
import { EquipmentIcons04Config } from './EquipmentIcons04/index';
|
||||
import { WuRenJiConfig } from './WuRenJi/index';
|
||||
import { ZhiShengJiConfig } from './ZhiShengJi/index';
|
||||
import { JiChangConfig } from './JiChang/index';
|
||||
import { NowPositionConfig } from './NowPosition/index';
|
||||
|
||||
export default [
|
||||
EquipmentContentbg01Config,
|
||||
|
|
@ -31,5 +35,9 @@ export default [
|
|||
EquipmentIcons03Config,
|
||||
EquipmentIcons04Config,
|
||||
EquipmentHuoQingJianCeConfig,
|
||||
EquipmentHuoQingXianSuoConfig
|
||||
EquipmentHuoQingXianSuoConfig,
|
||||
WuRenJiConfig,
|
||||
ZhiShengJiConfig,
|
||||
JiChangConfig,
|
||||
NowPositionConfig
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue