Merge branch 'master' of http://47.100.37.243:10191/wutt/manHourHousekeeper into master

fhKeeper/formulahousekeeper/customerBuler-crm/.nvmrc

@@ -0,0 +1 @@
+v20.11.0

fhKeeper/formulahousekeeper/customerBuler-crm/package.json

@@ -5,11 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "pinia": "^2.1.7",
     "vue": "^3.4.19",
@@ -18,7 +20,11 @@
   "devDependencies": {
     "@types/node": "^20.11.24",
     "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
     "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vue-tsc": "^1.8.27"

fhKeeper/formulahousekeeper/customerBuler-crm/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

fhKeeper/formulahousekeeper/customerBuler-crm/src/TailWindCss/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -4,10 +4,13 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router/index'
-import './style.css'
+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

@@ -4,8 +4,15 @@
     <h1 @click="changeName">修改名称</h1>
     <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
     <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'
@@ -108,5 +115,142 @@ 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>
+

fhKeeper/formulahousekeeper/customerBuler-crm/src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

fhKeeper/formulahousekeeper/customerBuler-crm/src/styles.css

@@ -0,0 +1,80 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+  
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+  }
+  a:hover {
+    color: #535bf2;
+  }
+  
+  body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+  
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+  
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+  
+  .card {
+    padding: 2em;
+  }
+  
+  #app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+  
+  @media (prefers-color-scheme: light) {
+    :root {
+      color: #213547;
+      background-color: #ffffff;
+    }
+    a:hover {
+      color: #747bff;
+    }
+    button {
+      background-color: #f9f9f9;
+    }
+  }
+  

fhKeeper/formulahousekeeper/customerBuler-crm/src/utils/request copy.ts

@@ -1,84 +0,0 @@
-/**axios封装* 请求拦截、相应拦截、错误统一处理*/
-import axios from 'axios';
-import router from '../router/index'
-//  let protocol = window.location.protocol; //协议
-//  let host = window.location.host; //主机
-//  axios.defaults.baseURL = protocol + "//" + host;
-axios.defaults.baseURL = '/api'
-axios.interceptors.request.use( 
-    //响应拦截
-    async config => {
-        // 每次发送请求之前判断vuex中是否存在token        
-        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
-        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
-        config.headers.token = sessionStorage.getItem('token')
-        return config;
-    },
-    error => {
-        return Promise.reject(error);
-    }
-)
-// 响应拦截器
-axios.interceptors.response.use(
-    response => {
-        if (response.status === 200) {return Promise.resolve(response); 
-            //进行中        
-        } else {
-            return Promise.reject(response); //失败       
-        }},// 服务器状态码不是200的情况    
-        error => {
-            if (error.response.status) {
-                switch (error.response.status) {
-                    // 401: 未登录                
-                    // 未登录则跳转登录页面，并携带当前页面的路径                
-                    // 在登录成功后返回当前页面，这一步需要在登录页操作。                
-                    case 401:// 自定义过期之后的操作break// 403 token过期                
-                    // 登录过期对用户进行提示                
-                    // 清除本地token和清空vuex中token对象                
-                    // 跳转登录页面                
-                    case 403:sessionStorage.clear()
-                    break// 404请求不存在                
-                    case 404:break;// 其他错误，直接抛出错误提示                
-                    default:
-                }
-                return Promise.reject(error.response);
-            }
-        }
-);
-/** * get方法，对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
-const $get = (url: string, params: object) => {
-    return new Promise(
-        (resolve, reject) => {
-            axios.get(url, {params: params,
-        }).then(res => {
-            resolve(res.data);
-        }).catch(err => {
-            reject(err.data)
-        })});
-}
-/** * post方法，对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
-const $post = (url: string, params: object) => {
-    return new Promise((resolve, reject) => {
-        axios.post(url, params, {
-            headers: {
-                'Content-type': ' application/x-www-form-urlencoded; charset=UTF-8',
-            }
-        })
-        //是将对象 序列化成URL的形式，以&进行拼接   
-        .then(res => {
-            resolve(res.data);
-        })
-        .catch(err => {
-            reject(err.data)
-        })
-    });
-}
-// 下面是将get和post方法挂载到vue原型上供全局使用、
-// vue2.x中是通 Vue.prototype 来绑定的，像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype，推荐使用globalProperties来绑定，
-export default {
-    install: (app: any) => {
-        app.config.globalProperties['$get'] = $get;
-        app.config.globalProperties['$post'] = $post;
-        app.config.globalProperties['$axios'] = axios;
-    }
-}

fhKeeper/formulahousekeeper/customerBuler-crm/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

fhKeeper/formulahousekeeper/customerBuler-crm/vite.config.ts

@@ -1,27 +1,39 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
-import { resolve } from 'path'
+import { resolve } from "path";
 
-const target = 'http://47.101.180.183:10010'
+const target = "http://47.101.180.183:10010";
 
 export default defineConfig({
   plugins: [vue()],
   server: {
+    host: "127.0.0.1",
     port: 19123,
+    open: true,
     proxy: {
-      '/api': { // 这里的'/api'表示需要转发到的接口路径前缀
+      "/api": {
+        // 这里的'/api'表示需要转发到的接口路径前缀
         target, // 将请求转发到的目标地址
         changeOrigin: true, // 支持跨域
-        rewrite: (path) => path.replace(/^\/api/, '') // 去除请求路径中的'/api'前缀
+        rewrite: (path) => path.replace(/^\/api/, ""), // 去除请求路径中的'/api'前缀
       },
     },
   },
   resolve: {
     alias: {
-      '@': resolve(__dirname, './src')
+      "@": resolve(__dirname, "./src"),
     },
     //extensions: [".ts", ".js", ".vue", ".json", ".mjs"],
-    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
-  }
-})
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+  },
+  // css相关配置
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "@/styles/global.scss";'
+
+      },
+    },
+  },
+});