feat(src/packages): 自定义远程网页和加载组态组件，新增全屏按钮自定义颜色

@@ -6,13 +6,17 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "",
+  dataset: '',
   // 圆角
-  borderRadius: 10
+  borderRadius: 10,
+  pages: {
+    page: 1,
+    pageSize: 10
+  },
+  color: 'black'
 }
 
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideILoadConfigurationframeConfig.key
   public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)

@@ -15,16 +15,38 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="分页">
+      <setting-item name="页码">
+        <n-input-number v-model:value="optionData.pages.page" size="small" :min="1" placeholder="页码"></n-input-number>
+      </setting-item>
+      <setting-item name="页数">
+        <n-input-number
+          disabled
+          v-model:value="optionData.pages.pageSize"
+          size="small"
+          :min="10"
+          placeholder="页数"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType, onMounted, ref } from 'vue'
+import { PropType, onMounted, ref, watch } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { getConfigurationList } from '@/api/external/common/index'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
@@ -40,7 +62,18 @@ const getConfigurationOptions = async (params: object) => {
   }
 }
 
+watch(
+  () => props.optionData.pages,
+  (newData: any) => {
+    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
 onMounted(() => {
-  getConfigurationOptions({ page: 1, pageSize: 10 })
+  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
 })
 </script>

@@ -3,9 +3,9 @@
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
-        class=""
         data-icon="fullscreen"
         width="4vw"
+        :style="`color:${color}`"
         height="4vh"
         fill="currentColor"
         aria-hidden="true"
@@ -35,8 +35,7 @@ import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen'
-import { isDevMode } from '@/utils/external/env';
-
+import { isDevMode } from '@/utils/external/env'
 
 const props = defineProps({
   chartConfig: {
@@ -50,7 +49,7 @@ const isShowSvg = ref(false)
 const allowfullscreen = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { borderRadius } = toRefs(props.chartConfig.option)
+const { borderRadius, color } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: ''
@@ -63,7 +62,7 @@ const getStyle = (radius: number) => {
   }
 }
 
-const isDev = isDevMode();
+const isDev = isDevMode()
 
 // 编辑更新
 watch(
@@ -72,7 +71,9 @@ watch(
     const currentHost = window.location.host
     const currentProtocol = window.location.protocol
     //预览
-    option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${isDev ? '?dev=1&' : '?'}configurationId=${newData}&lightbox=1`
+    option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${
+      isDev ? '?dev=1&' : '?'
+    }configurationId=${newData}&lightbox=1`
   },
   {
     immediate: true

@@ -6,13 +6,13 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "https://www.thingskit.com/",
+  dataset: 'https://www.thingskit.com/',
   // 圆角
-  borderRadius: 10
+  borderRadius: 10,
+  color: 'black'
 }
 
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideIframeConfig.key
   public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(OverrideIframeConfig)

@@ -15,22 +15,26 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue";
-import { option } from "./config";
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 </script>

@@ -3,9 +3,9 @@
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
-        class=""
         data-icon="fullscreen"
         width="4vw"
+        :style="`color:${color}`"
         height="4vh"
         fill="currentColor"
         aria-hidden="true"
@@ -48,7 +48,7 @@ const isShowSvg = ref(false)
 const allowfullscreen = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { borderRadius } = toRefs(props.chartConfig.option)
+const { borderRadius, color } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: ''