遥感组件，智览人员统计bug修复
userName
parent
cde125960f
commit
afddccda66
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<div class="bannerbox">
|
||||
<a-carousel autoplay dots-class="slick-dots slick-thumb">
|
||||
<div v-for="item in bannerArr" @click="bannerClick(item)">
|
||||
<img :src="item" />
|
||||
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled>
|
||||
<div v-for="item in bannerArr">
|
||||
<a-image :src="item" />
|
||||
</div>
|
||||
</a-carousel>
|
||||
</div>
|
||||
|
|
@ -17,9 +17,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bigImgbox" v-if="bigImgVisible" @click="hideClick">
|
||||
<img class="bigImg" :src="bigImgSrc" />
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -46,16 +43,6 @@ const {
|
|||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const bigImgVisible = ref(false)
|
||||
const bigImgSrc = ref()
|
||||
const bannerClick = (item) =>{
|
||||
console.log('iii', item);
|
||||
bigImgSrc.value = item;
|
||||
// bigImgVisible.value = true
|
||||
}
|
||||
const hideClick = ()=>{
|
||||
bigImgVisible.value = false
|
||||
}
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
|
|
@ -125,6 +112,10 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
:deep(.ant-carousel){
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.slick-slider){
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -156,18 +147,4 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
}
|
||||
|
||||
}
|
||||
.bigImgbox{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bigImg{
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,12 @@ const option = {
|
|||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#91F2A1'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
@ -51,7 +57,7 @@ const option = {
|
|||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#f00'
|
||||
color: '#91F2A1'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
|
|
|||
|
|
@ -69,6 +69,13 @@
|
|||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.itemStyle.normal.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,12 @@ const option = {
|
|||
name: '火情因子监测面积',
|
||||
smooth: true,
|
||||
symbolSize: 1, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#EFD50BFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
@ -69,6 +75,12 @@ const option = {
|
|||
name: '雷击火监测面积',
|
||||
smooth: true,
|
||||
symbolSize: 1, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#10D562FF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
@ -99,6 +111,12 @@ const option = {
|
|||
name: '相控雷达监测面积',
|
||||
smooth: true,
|
||||
symbolSize: 1, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#0CEDE5FF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
|
|||
|
|
@ -48,6 +48,13 @@
|
|||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.itemStyle.normal.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,12 @@ const option = {
|
|||
name: '路网规划率',
|
||||
smooth: false,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#08EE73FF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
@ -75,6 +81,12 @@ const option = {
|
|||
name: '信息处置率',
|
||||
smooth: false,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#DC9D15FF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
|
|
|||
|
|
@ -72,6 +72,13 @@
|
|||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.itemStyle.normal.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { WeiXingGuoLvConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textColors: ['#FFFFFF','#FFFFFF'],
|
||||
textSize: [14,10],
|
||||
backgroundColors: ["#05231A","#0A392A","#0A392A"],
|
||||
headerData:["卫星","观测目标","开始时间","结束时间"],
|
||||
dataset: [
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },
|
||||
],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WeiXingGuoLvConfig.key
|
||||
public attr = { ...chartInitConfig, w: 378, h: 550, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(WeiXingGuoLvConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<CollapseItem name="文本样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.textColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColors[index] = option.textColors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox
|
||||
:name="`大小-${index + 1}`"
|
||||
v-for="(item, index) in optionData.textSize"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize[index]"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`背景颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.backgroundColors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.backgroundColors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.backgroundColors[index] = option.backgroundColors[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 WeiXingGuoLvConfig: ConfigType = {
|
||||
key: 'WeiXingGuoLv',
|
||||
chartKey: 'VWeiXingGuoLv',
|
||||
conKey: 'VCWeiXingGuoLv',
|
||||
title: '卫星过滤信息',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'wxglxx.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<div class="headerbox">
|
||||
<div class="headerli" v-for="item in headerData">{{item}}</div>
|
||||
</div>
|
||||
<div class="sectionbox">
|
||||
<div class="secli" v-for="item in dataset">
|
||||
<div class="li">
|
||||
<div class="la">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="la">{{ item.target }}</div>
|
||||
</div>
|
||||
<div class="li time">{{ item.startTime }}</div>
|
||||
<div class="li time">{{ item.endTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref, onMounted } 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 {
|
||||
textColors,
|
||||
textSize,
|
||||
backgroundColors,
|
||||
dataset,
|
||||
headerData
|
||||
} = 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;
|
||||
flex-direction: column;
|
||||
.headerbox{
|
||||
height: 38px;
|
||||
background: v-bind('backgroundColors[0]');
|
||||
display: flex;
|
||||
.headerli{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: v-bind('textSize[0]+"px"');
|
||||
color: v-bind('textColors[0]');
|
||||
}
|
||||
}
|
||||
.sectionbox{
|
||||
height: calc(100% - 38px);
|
||||
overflow: auto;
|
||||
.secli{
|
||||
background: v-bind('backgroundColors[1]');
|
||||
display: flex;
|
||||
height: 38px;
|
||||
.li{
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
font-size: v-bind('textSize[1]+"px"');
|
||||
color: v-bind('textColors[1]');
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
.la{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.secli:nth-child(2n){
|
||||
background: v-bind('backgroundColors[2]');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #00611A; /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #0EB687; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 当鼠标悬停在滑块上时改变颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { WeiXingImgConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WeiXingImgConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 271, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(WeiXingImgConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</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 WeiXingImgConfig: ConfigType = {
|
||||
key: 'WeiXingImg',
|
||||
chartKey: 'VWeiXingImg',
|
||||
conKey: 'VCWeiXingImg',
|
||||
title: '卫星',
|
||||
category: ChatCategoryEnum.ZHILAN,
|
||||
categoryName: ChatCategoryEnumName.ZHILAN,
|
||||
package: PackagesCategoryEnum.ZHILAN,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'weixingimg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/weixingimg.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,8 +7,10 @@
|
|||
<div class="bg">
|
||||
<div class="rate"
|
||||
:style="{
|
||||
width: (item.value / maxValue * 90) + '%',
|
||||
background: 'linear-gradient(90deg, ' + animalColor[index].color1 + ' 0%, ' + animalColor[index].color2 + ' 100%)'}">
|
||||
width: `${(item.value / maxValue * 90)}%`,
|
||||
background: `linear-gradient(90deg,
|
||||
${animalColor[index] ? animalColor[index].color1 : animalColor[0].color1} 0%,
|
||||
${animalColor[index] ? animalColor[index].color2 : animalColor[0].color2} 100%)`}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import { ZLLingZhongMianJiConfig } from './ZLLingZhongMianJi/index';
|
|||
import { ZhiLanTitlesConfig } from './ZhiLanTitles/index';
|
||||
import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
|
||||
import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
|
||||
import { WeiXingGuoLvConfig } from './WeiXingGuoLv/index';
|
||||
import { WeiXingImgConfig } from './WeiXingImg/index';
|
||||
|
||||
|
||||
export default [
|
||||
|
|
@ -23,6 +25,8 @@ export default [
|
|||
ZLLingZhongMianJiConfig,
|
||||
ZhiLanRenYuanLeiXingConfig,
|
||||
ZhiLanGongNengLeiXingConfig,
|
||||
WeiXingGuoLvConfig,
|
||||
WeiXingImgConfig,
|
||||
ZhiLanIcons01Config,
|
||||
ZhiLanIcons02Config,
|
||||
ZhiLanIcons03Config,
|
||||
|
|
|
|||
Loading…
Reference in New Issue