mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
feat: 增加工程组态组件 修复折线图柱状图总配置
This commit is contained in:
parent
8a52942d39
commit
c06ffdae84
3
.env
3
.env
@ -2,7 +2,8 @@
|
||||
VITE_DEV_PORT = '8080'
|
||||
|
||||
# development path
|
||||
VITE_DEV_PATH = 'http://192.168.0.34:11887'
|
||||
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
|
||||
VITE_DEV_PATH = 'http://192.168.0.34:18077'
|
||||
# VITE_DEV_PATH = 'http://192.168.0.120:3001'
|
||||
|
||||
# production path
|
||||
|
BIN
src/assets/images/chart/customponents/EngineeringConfig.png
Normal file
BIN
src/assets/images/chart/customponents/EngineeringConfig.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 159 KiB |
@ -37,7 +37,8 @@ xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
series: [seriesItem, seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
@ -107,7 +107,11 @@ const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
// const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
|
||||
const allSeriesConfig = computed(() => {
|
||||
return props.optionData.allSeriesConfig
|
||||
})
|
||||
|
||||
watch(() => allSeriesConfig.value, (v) => {
|
||||
seriesList.value.forEach((item: typeof seriesItem) => {
|
||||
|
@ -37,7 +37,8 @@ export const option = {
|
||||
type: 'category'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
series: [seriesItem, seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
@ -132,7 +132,11 @@ const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
// const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
|
||||
const allSeriesConfig = computed(() => {
|
||||
return props.optionData.allSeriesConfig
|
||||
})
|
||||
|
||||
watch(() => allSeriesConfig.value, (v) => {
|
||||
seriesList.value.forEach((item: typeof seriesItem) => {
|
||||
|
@ -43,7 +43,8 @@ export const option = {
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
series: [seriesItem, seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
@ -142,7 +142,11 @@ const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
// const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
|
||||
const allSeriesConfig = computed(() => {
|
||||
return props.optionData.allSeriesConfig
|
||||
})
|
||||
|
||||
watch(() => allSeriesConfig.value, (v) => {
|
||||
seriesList.value.forEach((item: typeof seriesItem) => {
|
||||
|
@ -54,7 +54,8 @@ const options = {
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem]
|
||||
series: [seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
@ -126,10 +126,11 @@
|
||||
import { PropType, computed, ref, watch } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { chartColorsSearch, defaultTheme, GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { seriesItem } from "./config";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { graphic } from "echarts/core";
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
@ -142,11 +143,30 @@ const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
// const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
|
||||
const allSeriesConfig = computed(() => {
|
||||
return props.optionData.allSeriesConfig
|
||||
})
|
||||
|
||||
watch(() => allSeriesConfig.value, (v) => {
|
||||
seriesList.value.forEach((item: typeof seriesItem) => {
|
||||
Object.assign(item, cloneDeep(v))
|
||||
seriesList.value.forEach((item: typeof seriesItem, index: number) => {
|
||||
const themeColor = chartColorsSearch[defaultTheme]
|
||||
item.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[(3 + index) % themeColor.length]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
Object.assign(item, cloneDeep(v), {
|
||||
areaStyle: {
|
||||
color: cloneDeep(item.areaStyle.color)
|
||||
}
|
||||
})
|
||||
})
|
||||
}, {
|
||||
deep: true,
|
||||
|
@ -80,6 +80,19 @@ watch(
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
const themeColor = colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[(3 + index) % themeColor.length]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
|
@ -55,7 +55,8 @@ export const option = {
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem]
|
||||
series: [seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
@ -178,7 +178,11 @@ const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
// const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
|
||||
|
||||
const allSeriesConfig = computed(() => {
|
||||
return props.optionData.allSeriesConfig
|
||||
})
|
||||
|
||||
watch(() => allSeriesConfig.value, (v) => {
|
||||
seriesList.value.forEach((item: typeof seriesItem) => {
|
||||
|
@ -0,0 +1,29 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EngineeringConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
// // 图片路径
|
||||
// dataset: '',
|
||||
// // 适应方式
|
||||
// fit: 'contain',
|
||||
// // 圆角
|
||||
// borderRadius: 0
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
constructor() {
|
||||
super();
|
||||
this.attr.w = 960
|
||||
this.attr.h = 540
|
||||
}
|
||||
public key = EngineeringConfig.key
|
||||
public chartConfig = cloneDeep(EngineeringConfig)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep({
|
||||
showInterval: false,
|
||||
mapId: null
|
||||
})
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<setting-item-box name="组态ID" :alone="true">
|
||||
<n-input-number v-model:value="props.customData.mapId" size="small" placeholder="请输入组态ID"/>
|
||||
</setting-item-box>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
@ -0,0 +1,16 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const EngineeringConfig: ConfigType = {
|
||||
key: 'EngineeringConfig',
|
||||
chartKey: 'VEngineeringConfig',
|
||||
conKey: 'VCEngineeringConfig',
|
||||
// VCD开头
|
||||
conDataKey: 'VCDEngineeringConfig',
|
||||
title: '工程组态',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'EngineeringConfig.png'
|
||||
}
|
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div v-if="chartConfig.customData.mapId" :style="{width: w, height: h}">
|
||||
<iframe :src="url" width="1920" height="1080" style="transform-origin: left top" :style="{transform: handleScale}" frameborder="no" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;" v-else>
|
||||
<img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 30%" alt="">
|
||||
<div style="color: #fff;text-align: center;font-size: 40px;">请输入组态ID</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, onMounted, onUnmounted } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
import { postMessageToParent } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType & { customData: { mapId: any } }>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
|
||||
const originStore = useOriginStore()
|
||||
|
||||
let url = computed(() => {
|
||||
const account = originStore?.getOriginStore?.user?.user?.account
|
||||
const password = 'laimi@123'
|
||||
let origin = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://192.168.0.42:9528'
|
||||
let str = `${origin}/static/#/dynamicRing/schematicDiagram/${props.chartConfig.customData.mapId}?parentOrigin=${window.location.origin}&isIframe=true&account=${account}&password=${password}`
|
||||
return str
|
||||
})
|
||||
|
||||
const handleMsg = (event: any) => {
|
||||
let origin = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://192.168.0.42:9528'
|
||||
if (event.origin === origin) {
|
||||
// 处理来自子级页面的消息
|
||||
let obj = event.data
|
||||
if(obj.type === 'changeRoute') {
|
||||
postMessageToParent({
|
||||
type: 'changeRouterV1',
|
||||
url: obj.path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleScale = computed(() => {
|
||||
let x = w.value / 1920
|
||||
let y = h.value / 1080
|
||||
let str = `scale(${x}, ${y})`
|
||||
return str
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('message', handleMsg);
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('message', handleMsg)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
@ -3,6 +3,7 @@ import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
||||
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||
import { OverviewOfComputingNodesConfig } from './OverviewOfComputingNodes'
|
||||
import { GDMapConfig } from './GDMap'
|
||||
import { EngineeringConfig } from './EngineeringConfig'
|
||||
import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
|
||||
import { DashboardConfig } from './Dashboard'
|
||||
|
||||
@ -12,6 +13,7 @@ export default [
|
||||
RealTimeTrafficConfig,
|
||||
OverviewOfComputingNodesConfig,
|
||||
GDMapConfig,
|
||||
EngineeringConfig,
|
||||
MonitorRealTimeEventsConfig,
|
||||
DashboardConfig,
|
||||
]
|
||||
|
@ -17,7 +17,7 @@ import { isPreview } from '@/utils/router'
|
||||
|
||||
|
||||
let date = ref(moment().format('yyyy-MM-DD'))
|
||||
const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
|
||||
let timer: any
|
||||
|
||||
|
@ -6,7 +6,8 @@ import video from '@/assets/videos/earth.mp4'
|
||||
|
||||
export const option = {
|
||||
// 视频路径
|
||||
dataset: video,
|
||||
dataset: 'https://goviewpro.tos-cn-beijing.volces.com/charts-img-db/charts-img-db_id_17bwi76fzta800.mp4',
|
||||
datasetCustom: '',
|
||||
// 视频列表
|
||||
datasetList: [],
|
||||
// 循环播放
|
||||
|
@ -6,9 +6,11 @@
|
||||
<setting-item name="">
|
||||
<n-select v-model:value="optionData.dataset" :options="datasetList" :render-option="renderOption" size="small"></n-select>
|
||||
</setting-item>
|
||||
<!-- <setting-item name="自定义源">-->
|
||||
<!-- <n-input v-model:value="optionData.dataset" size="small"></n-input>-->
|
||||
<!-- </setting-item>-->
|
||||
</setting-item-box>
|
||||
<setting-item-box name="自定义源" alone>
|
||||
<setting-item name="将会覆盖源选项">
|
||||
<n-input v-model:value="optionData.datasetCustom" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="混合模式" alone>
|
||||
<setting-item name="使用滤色选项可以去除黑色背景">
|
||||
|
@ -12,7 +12,7 @@
|
||||
:muted="option.muted"
|
||||
:width="w"
|
||||
:height="h"
|
||||
:src="option.dataset"
|
||||
:src="option.datasetCustom || option.dataset"
|
||||
></video>
|
||||
</template>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user