提交客户管家文件

fhKeeper/formulahousekeeper/customerBuler-crm/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.7",
+        "echarts": "^5.5.0",
         "element-plus": "^2.5.6",
         "pinia": "^2.1.7",
         "vue": "^3.4.19",
@@ -1360,6 +1361,15 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/echarts": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.5.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.689",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz",
@@ -2696,6 +2706,11 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/typescript": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
@@ -2990,6 +3005,14 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

fhKeeper/formulahousekeeper/customerBuler-crm/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "pinia": "^2.1.7",
     "vue": "^3.4.19",

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/ReEcharts/index.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ECharts, EChartsOption, init } from 'echarts';
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+
+// 定义props
+interface Props {
+	width?: string;
+	height?: string;
+	option: EChartsOption;
+}
+const props = withDefaults(defineProps<Props>(), {
+	width: '100%',
+	height: '100%',
+	option: () => ({})
+});
+
+const myChartsRef = ref<HTMLDivElement>();
+let myChart: ECharts;
+// eslint-disable-next-line no-undef
+// let timer: string | number | NodeJS.Timeout | undefined;
+let timer: number | undefined;
+
+// 初始化echarts
+const initChart = (): void => {
+	if (myChart !== undefined) {
+		myChart.dispose();
+	}
+	myChart = init(myChartsRef.value as HTMLDivElement);
+	// 拿到option配置项，渲染echarts
+	myChart?.setOption(props.option, true);
+};
+
+// 重新渲染echarts
+const resizeChart = (): void => {
+	timer = setTimeout(() => {
+		if (myChart) {
+			myChart.resize();
+		}
+	}, 500);
+};
+
+onMounted(() => {
+	initChart();
+	window.addEventListener('resize', resizeChart);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', resizeChart);
+	clearTimeout(timer);
+	timer = 0;
+});
+
+watch(
+	props.option,
+	() => {
+		initChart();
+	},
+	{
+		deep: true
+	}
+);
+</script>
+
+<template>
+	<div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
+</template>

fhKeeper/formulahousekeeper/customerBuler-crm/src/main.ts

@@ -6,9 +6,11 @@ import App from './App.vue'
 import router from './router/index'
 import "./styles.css"
 import "./TailWindCss/index.css";
+import * as echarts from 'echarts';
 
 const app = createApp(App)
 
+app.config.globalProperties.$echarts = echarts;
 app
   .use(ElementPlus)
   .use(createPinia())

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -6,8 +6,13 @@
     <div @click="networkRequest()">点击发起网络请求</div>
     <div class="abc fonsSize30">测试sass样式</div>
     <div class="text-pink-200">1111</div>
+    <div :style="{ width: '1230px', height: '350px' }">
+        <Echarts :option="option" />
+    </div>
 </template>
 <script lang="ts" setup>
+import { reactive } from 'vue';
+import Echarts from '@/components/ReEcharts/index.vue';
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from "../store/index";
 import { post } from '@/utils/request'
@@ -110,6 +115,141 @@ const defaultProps = {
     children: 'children',
     label: 'label',
 }
+
+const option = reactive({
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow',
+            label: {
+                show: true
+            }
+        }
+    },
+    grid: {
+        left: '4%',
+        top: '15%',
+        right: '4%',
+        bottom: '10%'
+    },
+    legend: {
+        data: ['昨日总人数', '今日实时人数'],
+        top: '4%',
+        color: '#1FC3CE',
+        fontSize: 14,
+        selected: { 昨日使用率: false } // 不需要显示的设置为false
+    },
+    xAxis: {
+        data: [
+            '会议室1',
+            '会议室2',
+            '会议室3',
+            '会议室4',
+            '会议室5',
+            '会议室6',
+            '会议室7',
+            '会议室8',
+            '会议室9'
+        ],
+        axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+                color: '#eee',
+                width: 1
+            }
+        },
+        axisTick: {
+            show: true, //隐藏X轴刻度
+            alignWithLabel: true
+        },
+        axisLabel: {
+            show: true,
+            color: '#333', //X轴文字颜色
+            fontSize: 14
+        }
+    },
+    yAxis: [
+        {
+            type: 'value',
+            name: '人数',
+            nameTextStyle: {
+                color: '#333',
+                fontSize: 14
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                    color: '#eee'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: true,
+                color: '#333',
+                fontSize: 14
+            }
+        }
+    ],
+    series: [
+        {
+            name: '昨日总人数',
+            type: 'bar',
+            barWidth: 18,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0, // 右
+                    y: 1, // 下
+                    x2: 0, // 左
+                    y2: 0, // 上
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: '#F89898' // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: '#F56C6C' // 100% 处的颜色
+                        }
+                    ]
+                }
+            },
+            data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
+        },
+        {
+            name: '今日实时人数',
+            type: 'bar',
+            barWidth: 18,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0, // 右
+                    y: 1, // 下
+                    x2: 0, // 左
+                    y2: 0, // 上
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: '#52A7FF' // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: '#409EFF' // 100% 处的颜色
+                        }
+                    ]
+                }
+            },
+            data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
+        }
+    ]
+});
+
 </script>
 
 <style lang="scss" scoped></style>