adtec-core-package 0.2.10 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "private": false,
   "type": "module",
   "scripts": {
@@ -13,27 +13,29 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@onlyoffice/document-editor-vue": "1.4.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "pinia-plugin-store": "^2.2.9",
-    "crypto-js": "^4.2.0",
-    "jsencrypt": "^3.3.2",
+    "@onlyoffice/document-editor-vue": "1.4.0",
+    "@types/echarts": "^5.0.0",
     "axios": "^1.7.7",
+    "crypto-js": "^4.2.0",
+    "echarts": "^5.6.0",
     "element-plus": "^2.8.7",
+    "jsencrypt": "^3.3.2",
     "pinia": "^2.3.0",
+    "pinia-plugin-store": "^2.2.9",
     "scss": "^0.2.4",
     "scss-loader": "^0.0.1",
+    "socket.io-client": "^2.3.1",
+    "uuid": "^11.0.3",
     "vue": "^3.5.13",
     "vue-focus-lock": "^3.0.0",
-    "vue-router": "^4.5.0",
-    "uuid": "^11.0.3",
-    "socket.io-client": "^2.3.1",
-    "vue-img-viewr": "2.0.11"
+    "vue-img-viewr": "2.0.11",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.10.2",
     "@types/crypto-js": "^4.2.2",
+    "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^10.1.0",

package/src/components/Search/ElSearch.vue

@@ -11,7 +11,6 @@
         </div>
       </div>
     </el-flex>
-
     <el-flex
       width="240px"
       justify="flex-end"
@@ -22,20 +21,19 @@
       <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
       <el-button type="text" @click="retract" v-show="is_retract">
         <el-icon
-          ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
-            v-show="retractval === '收起'" /></el-icon
+        ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
+          v-show="retractval === '收起'" /></el-icon
         >{{ retractval }}</el-button
       >
     </el-flex>
   </el-flex>
 </template>
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { useRouter } from 'vue-router'
-import ElFlex from '../ElFlex/ElFlex.vue'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
-
+import ElFlex from '../ElFlex/ElFlex.vue'
 const router = useRouter()
 const getRouteName = computed(() => {
   return router.currentRoute.value.name as string
@@ -47,30 +45,42 @@ const is_retract = ref(false)
 const ref_div = ref()
 const windowContent = useWindowSize()
 const collapsed = inject<boolean>('collapsed')
+const collapsedSearch=ref<boolean|undefined>(false)
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-expect-error
 watch(collapsed, () => {
+  collapsedSearch.value = collapsed
+  calculation()
+})
+watch(collapsedSearch, () => {
   calculation()
 })
 watch(windowContent.width, () => {
   calculation()
 })
 const calculation = () => {
-  setTimeout(() => {
-    if (!(ref_div.value.offsetHeight > 95)) {
-      if (ref_div.value.offsetHeight !== 0) {
-        is_retract.value = false
-        height.value = ref_div.value.offsetHeight + 15 + 'px'
-        retractval.value = '收起'
-      } else {
-        calculation()
+  nextTick(()=>{
+    setTimeout(() => {
+      if(ref_div.value.children.length>0) {
+        if (!(ref_div.value.children[0].offsetHeight > 95)) {
+          if (ref_div.value.children[0].offsetHeight !== 0) {
+            is_retract.value = false
+            height.value = ref_div.value.children[0].offsetHeight + 15 + 'px'
+            retractval.value = '收起'
+          } else {
+            calculation()
+          }
+        }else if(ref_div.value.children[0].offsetHeight<=95){
+          is_retract.value = false
+        }
+        else {
+          is_retract.value = true
+          height.value = '95px'
+          retractval.value = '展开'
+        }
       }
-    } else {
-      is_retract.value = true
-      height.value = '95px'
-      retractval.value = '展开'
-    }
-  }, 100)
+    }, 200)
+  })
 }
 watch(windowContent.height, () => {
   calculation()
@@ -100,6 +110,11 @@ const emit = defineEmits<{
   (event: 'search'): void
 }>()
 onMounted(() => {
+  collapsedSearch.value = collapsed
+  //@ts-ignore
+  window.$wujie?.bus.$on("collapsedChangeBus", (val:boolean) => {
+    collapsedSearch.value=val
+  });
   nextTick(() => {
     if (!(ref_content.value.children[0].scrollHeight > 95)) {
       is_retract.value = false
@@ -112,7 +127,10 @@ onMounted(() => {
     }
   })
 })
-
+onUnmounted(()=>{
+  //@ts-ignore
+  window.$wujie?.bus.$off("collapsedChangeBus")
+})
 // onKeyStroke(['d', 'D', 'ArrowRight'], () => {
 //   translateX.value += 10
 // }, { dedupe: true })

package/src/components/baseEcharts/index.vue

@@ -0,0 +1,48 @@
+<!--创建人 胡啸东-->
+<!--说明: index-->
+<!--创建时间: 2024/11/4 下午4:52-->
+<!--修改时间: 2024/11/4 下午4:52-->
+<template>
+  <div
+    ref="echartsRef"
+    :style="{
+      width: width,
+      height: height,
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, type PropType } from 'vue'
+import { useEcharts, type EChartsCoreOption } from '../../hooks/useEcharts.ts' // 引入hooks
+const props = defineProps({
+  options: { type: Object as PropType<EChartsCoreOption>, required: true },
+  height: { type: String, default: '100%' },
+  width: { type: String, default: '100%' },
+  themeColors: { type: Array as PropType<string[]>, default: () => [] },
+})
+
+const echartsRef = ref()
+
+const { setOptions, initCharts } = useEcharts(echartsRef, props.options)
+
+watch(
+  () => props.options,
+  (nVal) => {
+    let targetOptions: EChartsCoreOption = {}
+    if (props.themeColors && props.themeColors.length > 0) {
+      targetOptions = { ...nVal }
+      targetOptions.color = props.themeColors
+    } else {
+      targetOptions = { ...nVal }
+    }
+    setOptions(targetOptions)
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  initCharts()
+})
+defineExpose({ setOptions, initCharts })
+</script>

package/src/hooks/useDictHooks.ts

@@ -4,11 +4,12 @@ import SysDictCacheApi from '../api/SysDictCacheApi'
 import type { ISysDictDataCacheVo } from '../interface/ISysDictDataCacheVo'
 import { dictStore } from '../stores/dictStore'
 
-export default function useDictHooks(dictTypes: string[]) {
+export default function useDictHooks(dictTypes?: string[]) {
   const dictStores = dictStore()
   const { dictMap, dictDefaultValueMap } = storeToRefs(dictStores)
   const getDict = async (dictTypes: string[]) => {
     try {
+      if (!dictTypes || !dictTypes.length) return
       // 判断是否存在缓存数据，如果存在则不请求接口
       const dictKeySet = new Set(Object.keys(dictStores.dictMap))
       const uncachedDictTypes = dictTypes.filter((dictType) => !dictKeySet.has(dictType))
@@ -62,9 +63,9 @@ export default function useDictHooks(dictTypes: string[]) {
   const getDictData = (value: string, dictType: string) => {
     return dictStores.dictDataMap.get(dictType)?.get(value)
   }
-
-  getDict(dictTypes).then(() => {})
-
+  if (dictTypes && dictTypes.length) {
+    getDict(dictTypes).then(() => {})
+  }
   return {
     dictMap,
     dictDefaultValueMap,

package/src/hooks/useEcharts.ts

@@ -0,0 +1,58 @@
+/**
+ * 创建人 胡啸东
+ * 说明: useEcharts
+ * 创建时间: 2024/11/4 下午4:51
+ * 修改时间: 2024/11/4 下午4:51
+ */
+import { onBeforeUnmount, onDeactivated, onMounted,  shallowRef, unref } from 'vue'
+import type{Ref}from 'vue'
+import echarts from '../plugins/echartsConfig.ts'
+
+export type EChartsCoreOption = echarts.EChartsCoreOption
+
+const useEcharts = (elRef: Ref<HTMLDivElement>, options: EChartsCoreOption) => {
+  const charts = shallowRef<echarts.ECharts>()
+
+  const setOptions = (options: EChartsCoreOption) => {
+    charts.value && charts.value.setOption(options)
+  }
+
+  // 初始化
+  const initCharts = (themeColor?: Array<string>) => {
+    const el = unref(elRef)
+    if (!el || !unref(el)) {
+      return
+    }
+    charts.value = echarts.init(el)
+    if (themeColor) {
+      options.color = themeColor
+    }
+    setOptions(options)
+  }
+
+  // 重新窗口变化时，重新计算
+  const resize = () => {
+    charts.value && charts.value.resize()
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', resize)
+  })
+
+  // 页面keepAlive时，不监听页面
+  onDeactivated(() => {
+    window.removeEventListener('resize', resize)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resize)
+  })
+
+  return {
+    initCharts,
+    setOptions,
+    resize
+  }
+}
+
+export { useEcharts }

package/src/hooks/useResetRefHooks.ts

@@ -1,5 +1,4 @@
 import { type Ref, ref } from 'vue'
-import { cloneDeep } from 'lodash-es'
 
 /**
  * 创建人 胡啸东
@@ -9,10 +8,10 @@ import { cloneDeep } from 'lodash-es'
  */
 
 export function useResetRefHooks<T>(value: T): [Ref<T>, () => void] {
-  const initValue = cloneDeep(value)
+  const initValue = JSON.parse(JSON.stringify(value))
   const state = ref(value)
   const reset = () => {
-    state.value = cloneDeep(initValue)
+    state.value = JSON.parse(JSON.stringify(initValue))
   }
   //@ts-ignore
   return [state, reset]

package/src/mixin/globalMixin.ts

@@ -15,6 +15,7 @@ import ElTableColumnEdit from '../components/Table/ElTableColumnEdit.vue'
 import vKeydown from '../directives/vKeydown'
 import ElAutoToolTip from '../components/autoToolTip/ElAutoToolTip.vue'
 import userSelect from '../components/business/userSelect.vue'
+import baseEcharts from '../components/baseEcharts/index.vue'
 //@ts-ignore
 export const globalMixin = {
   components: {
@@ -26,7 +27,9 @@ export const globalMixin = {
     ElIconBtn,
     ElIconSearch,
     ElTableColumnEdit,
-    ElAutoToolTip,userSelect
+    ElAutoToolTip,
+    userSelect,
+    baseEcharts,
   },
   directives: {
     keydown: vKeydown,

package/src/plugins/echartsConfig.ts

@@ -0,0 +1,80 @@
+/**
+ * 创建人 胡啸东
+ * 说明: echartsConfig
+ * 创建时间: 2024/11/4 下午4:50
+ * 修改时间: 2024/11/4 下午4:50
+ */
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core'
+//
+// 引入内置组件，组件后缀都为Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent, // 数据集组件
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent, // 数据转换器组件(filter, sort)
+} from 'echarts/components'
+
+// 引入渲染器：echarst默认使用canvas渲染，引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+
+// 引入图表类型，后缀都为Chart
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+} from 'echarts/charts'
+
+// 注册必须的组件
+echarts.use([
+  // 内置组件
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent,
+  // 渲染器
+  CanvasRenderer,
+  SVGRenderer,
+  // 特性
+  LabelLayout,
+  UniversalTransition,
+  // 图表
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+])
+
+export default echarts