feat: 增加工程组态组件 修复折线图柱状图总配置

This commit is contained in:
huanghao1412 2024-02-20 18:33:53 +08:00
parent 8a52942d39
commit c06ffdae84
23 changed files with 220 additions and 20 deletions

3
.env
View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

View File

@ -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 {

View File

@ -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) => {

View File

@ -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 {

View File

@ -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) => {

View File

@ -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 {

View File

@ -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) => {

View File

@ -54,7 +54,8 @@ const options = {
type: 'value'
},
dataset: { ...dataJson },
series: [seriesItem]
series: [seriesItem],
allSeriesConfig: seriesItem
}
export default class Config extends PublicConfigClass implements CreateComponentType {

View File

@ -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,

View File

@ -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
}
)

View File

@ -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 {

View File

@ -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) => {

View File

@ -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
})
}

View File

@ -0,0 +1,11 @@
<template>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -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>

View File

@ -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'
}

View File

@ -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>

View File

@ -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,
]

View File

@ -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

View File

@ -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: [],
// 循环播放

View File

@ -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="使用滤色选项可以去除黑色背景">

View File

@ -12,7 +12,7 @@
:muted="option.muted"
:width="w"
:height="h"
:src="option.dataset"
:src="option.datasetCustom || option.dataset"
></video>
</template>