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

.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

src/packages/components/Charts/Bars/BarCommon/config.ts

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

src/packages/components/Charts/Bars/BarCommon/config.vue

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

src/packages/components/Charts/Bars/BarCrossrange/config.ts

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

src/packages/components/Charts/Bars/BarCrossrange/config.vue

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

src/packages/components/Charts/Lines/LineCommon/config.ts

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

src/packages/components/Charts/Lines/LineCommon/config.vue

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

src/packages/components/Charts/Lines/LineGradientSingle/config.ts

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

src/packages/components/Charts/Lines/LineGradientSingle/config.vue

@@ -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) => {
+  seriesList.value.forEach((item: typeof seriesItem, index: number) => {
-    Object.assign(item, cloneDeep(v))
+    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,

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

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

src/packages/components/Charts/Lines/LineLinearSingle/config.ts

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

src/packages/components/Charts/Lines/LineLinearSingle/config.vue

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

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.ts

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

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.vue

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

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/configData.vue

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

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.ts

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

src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue

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

src/packages/components/CustomComponents/CustomComponents/index.ts

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

src/packages/components/Decorates/Mores/TimeCommon1/index.vue

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

src/packages/components/Informations/Mores/Video/config.ts

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

src/packages/components/Informations/Mores/Video/config.vue

@@ -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="自定义源">-->
+    </setting-item-box>
-<!--        <n-input v-model:value="optionData.dataset" size="small"></n-input>-->
+    <setting-item-box name="自定义源" alone>
-<!--      </setting-item>-->
+      <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="使用滤色选项可以去除黑色背景">

src/packages/components/Informations/Mores/Video/index.vue

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