Merge branch 'perf/echarts' into 'main_dev'

feat(src/components/Pages): echarts图表，全局配置，新增y轴取值范围配置

See merge request yunteng/thingskit-view!240

@@ -164,6 +164,14 @@
     <template #header>
       <n-switch v-model:value="yAxis.show" size="small"></n-switch>
     </template>
+    <setting-item-box name="范围" v-if="yAxis.showRange">
+      <setting-item name="最小值" >
+        <n-input-number  v-model:value="yAxis.min" size="small" min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="最大值">
+        <n-input-number  v-model:value="yAxis.max" size="small" min="0"></n-input-number>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="单位">
       <setting-item name="名称">
         <n-input v-model:value="yAxis.name" size="small"></n-input>
@@ -294,7 +302,6 @@
     <template #header>
       <n-switch v-model:value="visualMap.show" size="small"></n-switch>
     </template>
-
     <setting-item-box name="范围">
       <setting-item name="最小值">
         <n-input-number v-model:value="visualMap.min" size="small"></n-input-number>
@@ -373,6 +380,13 @@ const xAxis = computed(() => {
 })
 
 const yAxis = computed(() => {
+  if((props.optionData?.yAxis as Recordable)){
+    if(!(props.optionData?.yAxis as Recordable).showRange) {
+      //针对横向柱状图和热力图
+      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'min');
+      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'max');
+    }
+  }
   return props.optionData.yAxis
 })
 

@@ -33,6 +33,7 @@ export const option = {
     type: 'value'
   },
   yAxis: {
+    showRange: false,
     show: true,
     type: 'category'
   },

@@ -15,6 +15,7 @@ export const option = {
     data: dataJson.xAxis
   },
   yAxis: {
+    showRange: false,
     data: dataJson.yAxis
   },
   visualMap: {

 <template>
-  <div>
+  <div class="device-history-query">
     <n-space vertical>
       <div class="form">
         <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange"
@@ -96,6 +96,27 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const domName = document.getElementsByClassName('device-history-query')[0] as HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
+        useFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,

+/**
+ * 单个组件全屏
+ * @param domName 
+ * @param htmlName 
+ */
+
 export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
   const isFullScreen = document.fullscreenElement
+
   const currentDatkTheme = htmlName.getAttribute('data-theme')
 
+  //特殊处理单设备多属性组件全屏显示
+  const setDomName = (domName: any,top0: string, top1: string) => {
+    domName.children[0].style.top = top0
+    domName.style.paddingBottom = '80px'
+    domName.children[1].style.top = top1
+  }
+
+  const setDomNameAndStyle = () => {
+    domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    domName.children[0].style.position = 'relative'
+    setDomName(domName, '30px','40px')
+  }
+
   if (isFullScreen) {
     if (document.exitFullscreen) {
       document.exitFullscreen()
@@ -11,18 +31,19 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
     //兼容其他浏览器
     if (domName.requestFullscreen) {
       domName.requestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.mozRequestFullScreen) {
       domName.mozRequestFullScreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.webkitRequestFullscreen) {
       domName.webkitRequestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.msRequestFullscreen) {
       domName.msRequestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     }
   }
+
   //fix 浏览器监听esc退出
   function exitHandler() {
     if (
@@ -33,6 +54,7 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
       domName.style.background = currentDatkTheme === 'light' ? '' : ''
     }
   }
+
   // 监听fullscreenchange事件（全屏模式的变化）
   if (document.addEventListener) {
     document.addEventListener('webkitfullscreenchange', exitHandler, false)

@@ -48,6 +48,9 @@
     }
   },
   "yAxis": {
+    "showRange":true,
+    "min": 0,
+    "max": 200,
     "show": true,
     "name": "",
     "nameGap": 15,