From 793ce4e19ec514f7eeabd78bf4e6d5e612e6ce6f Mon Sep 17 00:00:00 2001
From: "453530270@qq.com" <aa123456>
Date: Sat, 1 Jul 2023 16:53:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E7=BD=91=E7=BB=9C=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json            |   1 +
 src/api/home.js         |  17 +++
 src/assets/css/home.css | 283 ++++++++++++++++++++++++++++++++++++++++
 src/utils/request.js    |  49 +++++++
 yarn.lock               |  44 ++++++-
 5 files changed, 392 insertions(+), 2 deletions(-)
 create mode 100644 src/api/home.js
 create mode 100644 src/assets/css/home.css
 create mode 100644 src/utils/request.js

diff --git a/package.json b/package.json
index a87bc3b..2cf0c82 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "echarts": "^5.4.2",
     "less-loader": "^11.1.3",
diff --git a/src/api/home.js b/src/api/home.js
new file mode 100644
index 0000000..cf7de56
--- /dev/null
+++ b/src/api/home.js
@@ -0,0 +1,17 @@
+// 导入axios实例
+import request from '@/utils/request'
+
+// 定义接口的传参
+const api={
+    // 日客流趋势
+    daily_klqs:'index.php/allGroupTimeNum?granularity=daily'
+}
+
+// 获取群组
+export function allGroupTimeNum(param) {
+    return request({
+		url: api.daily_klqs,
+		method: 'get',
+		param,
+	})
+}
diff --git a/src/assets/css/home.css b/src/assets/css/home.css
new file mode 100644
index 0000000..e62b24c
--- /dev/null
+++ b/src/assets/css/home.css
@@ -0,0 +1,283 @@
+
+.gymbox {
+    margin-top: 3.2rem;
+    width: 100%;
+    background-image: url("../assets/img/gymbox_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: 0 0;
+    padding-top: 2.26rem;
+    height: 20rem;
+  }
+  
+  .gymbox .gympic {
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 0rem;
+    height: 12.68rem;
+    width: 100%;
+  }
+  
+  .gymbox .gympic img {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+    display: block;
+    padding-top: 0.2rem;
+    height: 16rem;
+  }
+  
+  .gymbox .gymnum {
+    width: 60%;
+    margin: 0.6rem auto;
+    text-align: center;
+    height: 3rem;
+    padding-top: 1.4rem;
+  }
+  
+  .gymbox .gymnum span {
+    font-size: 0.86rem;
+    display: block;
+    line-height: 1.2rem;
+  }
+  
+  .gymbox .gymnum p {
+    line-height: 1.2;
+    height: 26px;
+    font-size: 14px;
+    font-weight: 600;
+    display: block;
+  }
+  
+  /* 數據box */
+  .numbox {
+    width: 100%;
+    height: 4rem;
+    line-height: 1.2;
+    margin-top: 2.6rem;
+  }
+  
+  .numbox .numicon {
+    display: block;
+    width: 20%;
+    height: 3.2rem;
+    float: left;
+  }
+  
+  .numbox .numdiv {
+    width: 72%;
+    background-image: url("../assets/img/num_bg.png");
+    background-repeat: no-repeat;
+    background-position: 0 center;
+    background-size: 100%;
+    float: left;
+    margin-left: 0.68rem;
+    height: 4rem;
+    text-align: center;
+  }
+  
+  .numbox .numdiv p {
+    display: block;
+    float: left;
+    width: 100%;
+    line-height: 0;
+  }
+  
+  .numbox .numdiv .ndtitle {
+    padding-top: 0.4rem;
+    font-size: 1.08rem;
+  }
+  
+  .numbox .numdiv .nddesc {
+    color: #ccc;
+    font-size: 0.4rem;
+    padding-bottom: 0.2rem;
+  }
+  
+  /** 客流趋势 */
+  .klqs {
+    margin-top: 3rem;
+    background-image: url("../assets/img/klqs_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 3.8rem;
+    background-position: -1.04rem 0.2rem;
+  }
+  
+  .klqs .klqs_bg {
+    float: left;
+    /* width: 80%; */
+    margin-left: 4rem;
+    /* padding-left: 6.4rem; */
+    font-size: 1.6rem;
+  }
+  
+  .klqs .klbtn {
+    float: left;
+    margin-left: 1.06rem;
+  }
+  
+  .klqs .klbtn span {
+    display: block;
+    float: left;
+    width: 2.2rem;
+    height: 2.2rem;
+    margin-left: 0.4rem;
+    line-height: 2.2rem;
+    text-align: center;
+    border: 1px solid #006bff;
+    cursor: pointer;
+  }
+  
+  /* 选择年月日后的样式变化 */
+  .klqs .klbtn span.spactive {
+    background-image: url('../assets/img/sactive_bg.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: 0 0;
+  }
+  
+  /**  場館飽和度 */
+  .cgbox {
+    background-image: url("../assets/img/cgbox_bg.png");
+    width: 100%;
+    height: 12rem;
+    background-position: center center;
+    background-size: 100% 100%;
+    margin-top: 2.4rem;
+  }
+  
+  /* 饼图 */
+  .cgbox .cgpies {
+    width: 40%;
+    height: 12rem;
+    float: left;
+  }
+  
+  .cgbox .cgleft {
+    width: 30%;
+    height: 12rem;
+    float: left;
+  }
+  
+  .cgbox .cgleft>ul {
+    padding-left: 0.66rem;
+  }
+  
+  .cgbox .cgright {
+    width: 30%;
+    height: 12rem;
+    float: left;
+  }
+  
+  .cgbox .cgright>ul {
+    padding-left: 0.66rem;
+  }
+  
+  .cgbox .cglist {
+    margin-top: 3rem;
+  }
+  
+  .cgbox .cglist ul {
+    display: block;
+    width: 100%;
+  }
+  
+  .cgbox .cglist ul li {
+    width: 100%;
+    list-style: none;
+    height: 0.66rem;
+    line-height: 0.66rem;
+    font-size: 0.66rem;
+    margin-top: 1rem;
+  }
+  
+  .cgbox .cglist ul li span {
+    display: block;
+    float: left;
+    margin-left: 0.46rem;
+  }
+  
+  .cgbox .cglist ul li span img {
+    width: 0.68rem;
+    height: 0.68rem;
+  }
+  
+  .cgbox .cgright {
+    width: 30%;
+    height: 12rem;
+    float: left;
+  }
+  
+  /* 今日人數 */
+  .today_rs {
+    margin-top: 2.6rem;
+    width: 100%;
+  }
+  
+  .today_rs .tdrs_title {
+    background-image: url("../assets/img/klqs_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+    height: 3.2rem;
+    line-height: 2.86rem;
+    background-position: -1.04rem 0.2rem;
+    padding-left: 4.6rem;
+    font-size: 1.6rem;
+  }
+  
+  /** 各場館實時 */
+  .pcgrs {
+    clear: both;
+    margin-top: 2.6rem;
+    width: 100%;
+  }
+  
+  .pcgrs .pcgrs_title {
+    background-image: url("../assets/img/klqs_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 3.8rem;
+    background-position: -1.04rem 0.2rem;
+    padding-left: 4.6rem;
+    font-size: 1.6rem;
+  }
+  
+  .pcgrs .pcg_item {
+    margin-top: 0.4rem;
+    background-image: url("../assets/img/pcg_bg.png");
+    background-repeat: no-repeat;
+    height: 12rem;
+    width: 48%;
+    float: left;
+    margin-left: 2%;
+  }
+  
+  .pcgrs .pcg_item .pcpos {
+    text-align: right;
+    font-size: 0.68rem;
+    display: block;
+    float: right;
+    margin-top: 1.6rem;
+    padding-right: 1.18rem;
+  }
+  
+  .pcgrs .pcg_item .pcval {
+    font-size: 1.086rem;
+    margin-top: 6rem;
+    width: 68%;
+    display: block;
+    float: left;
+    text-align: center;
+  }
+  
+  .pcgrs .pcg_item .pcrate {
+    /* width: 32%; */
+    display: block;
+    float: left;
+    font-size: 0.86rem;
+    margin-top: 4rem;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..4d14201
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,49 @@
+import axios from 'axios'
+
+//https://www.jb51.net/article/246548.htm
+
+// 创建一个 axios 实例
+const service = axios.create({
+	//baseURL: '/api', // 所有的请求地址前缀部分
+	//baseURL: publicConfig.BASE_API,
+	//baseURL:ahost,
+	timeout: 60000, // 请求超时时间毫秒
+	withCredentials: true, // 异步请求携带cookie
+	headers: {
+		// 设置后端需要的传参类型
+		'Content-Type': 'application/json',
+	},
+})
+
+// 添加请求拦截器
+service.interceptors.request.use(
+	function (config) {
+		// 在发送请求之前做些什么
+		return config
+	},
+	function (error) {
+		// 对请求错误做些什么
+		return Promise.reject(error)
+	}
+)
+
+// 添加响应拦截器
+service.interceptors.response.use(
+	function (response) {
+		//console.log(response)
+		// 2xx 范围内的状态码都会触发该函数。
+		// 对响应数据做点什么
+		// dataAxios 是 axios 返回数据中的 data
+		const dataAxios = response.data
+		// 这个状态码是和后端约定的
+		const code = dataAxios.reset
+		return dataAxios
+	},
+	function (error) {
+		// 超出 2xx 范围的状态码都会触发该函数。
+		// 对响应错误做点什么
+		console.log(error)
+		return Promise.reject(error)
+	}
+)
+export default service
diff --git a/yarn.lock b/yarn.lock
index e8fc285..f15759b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2032,6 +2032,11 @@ async@^2.6.4:
   dependencies:
     lodash "^4.17.14"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz"
@@ -2049,6 +2054,15 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-loader@^8.2.2:
   version "8.3.0"
   resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz"
@@ -2415,6 +2429,13 @@ colorette@^2.0.10:
   resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.20.tgz"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz"
@@ -2747,6 +2768,11 @@ define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz"
@@ -3330,11 +3356,20 @@ flatted@^3.1.0:
   resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz"
@@ -4203,7 +4238,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -4972,6 +5007,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz"