From 530a78a71da4567e759e268047e4b46cb9082cca Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Fri, 10 Mar 2023 09:35:28 +0800
Subject: [PATCH] 统计页面添加布局
---
src/api/layout/index.js | 7 +
src/router/pages/index.js | 10
package-lock.json | 117 +++++++++++++++-
public/index.html | 1
src/views/statistics/index.vue | 30 ++++
src/router/axios.js | 46 ++++++
src/utils/auth.js | 35 +++++
public/img/exit.png | 0
/dev/null | 0
src/views/statistics/components/rightContainer.vue | 26 +++
src/main.js | 6
package.json | 2
src/views/layout/index.vue | 59 ++++++--
src/views/statistics/components/leftContainer.vue | 31 ++++
src/App.vue | 19 --
15 files changed, 337 insertions(+), 52 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2d96167..54237fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
"version": "0.1.0",
"dependencies": {
"@dvgis/dc-sdk": "^2.17.0",
+ "axios": "^1.3.4",
"core-js": "^3.8.3",
"echarts": "^5.4.1",
"element-ui": "^2.15.13",
+ "js-base64": "^3.7.5",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
@@ -3321,6 +3323,11 @@
"babel-runtime": "6.x"
}
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+ },
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3351,6 +3358,16 @@
},
"peerDependencies": {
"postcss": "^8.1.0"
+ }
+ },
+ "node_modules/axios": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
+ "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
}
},
"node_modules/babel-helper-vue-jsx-merge-props": {
@@ -3963,6 +3980,17 @@
"resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz",
"integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
"dev": true
+ },
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
},
"node_modules/commander": {
"version": "8.3.0",
@@ -4594,6 +4622,14 @@
},
"engines": {
"node": ">= 0.4"
+ }
+ },
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "engines": {
+ "node": ">=0.4.0"
}
},
"node_modules/depd": {
@@ -5789,7 +5825,6 @@
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
- "dev": true,
"engines": {
"node": ">=4.0"
},
@@ -5797,6 +5832,19 @@
"debug": {
"optional": true
}
+ }
+ },
+ "node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
}
},
"node_modules/forwarded": {
@@ -6593,6 +6641,11 @@
"@sideway/pinpoint": "^2.0.0"
}
},
+ "node_modules/js-base64": {
+ "version": "3.7.5",
+ "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
+ "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+ },
"node_modules/js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -7165,7 +7218,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"engines": {
"node": ">= 0.6"
}
@@ -7174,7 +7226,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
@@ -8588,6 +8639,11 @@
"engines": {
"node": ">= 0.10"
}
+ },
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/pseudomap": {
"version": "1.0.2",
@@ -13534,6 +13590,11 @@
"babel-runtime": "6.x"
}
},
+ "asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+ },
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -13552,6 +13613,16 @@
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
+ }
+ },
+ "axios": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
+ "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+ "requires": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
}
},
"babel-helper-vue-jsx-merge-props": {
@@ -14066,6 +14137,14 @@
"integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
"dev": true
},
+ "combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "requires": {
+ "delayed-stream": "~1.0.0"
+ }
+ },
"commander": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -14557,6 +14636,11 @@
"has-property-descriptors": "^1.0.0",
"object-keys": "^1.1.1"
}
+ },
+ "delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
@@ -15529,8 +15613,17 @@
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
- "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
- "dev": true
+ "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+ },
+ "form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "requires": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ }
},
"forwarded": {
"version": "0.2.0",
@@ -16162,6 +16255,11 @@
"@sideway/pinpoint": "^2.0.0"
}
},
+ "js-base64": {
+ "version": "3.7.5",
+ "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
+ "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+ },
"js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -16623,14 +16721,12 @@
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
- "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"requires": {
"mime-db": "1.52.0"
}
@@ -17676,6 +17772,11 @@
}
}
},
+ "proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/package.json b/package.json
index b953ad9..613a3f0 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
},
"dependencies": {
"@dvgis/dc-sdk": "^2.17.0",
+ "axios": "^1.3.4",
"core-js": "^3.8.3",
"echarts": "^5.4.1",
"element-ui": "^2.15.13",
+ "js-base64": "^3.7.5",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcf..0000000
--- a/public/favicon.ico
+++ /dev/null
Binary files differ
diff --git a/public/img/exit.png b/public/img/exit.png
new file mode 100644
index 0000000..ca1f149
--- /dev/null
+++ b/public/img/exit.png
Binary files differ
diff --git a/public/img/title-bg.png b/public/img/title-bg.png
deleted file mode 100644
index 582a0da..0000000
--- a/public/img/title-bg.png
+++ /dev/null
Binary files differ
diff --git a/public/index.html b/public/index.html
index 1136d90..8ca0274 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,6 @@
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
- <!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index c98cb3d..3a515e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,5 @@
<template>
<div id="app">
- <!-- <nav>
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
- </nav> -->
<router-view/>
</div>
</template>
@@ -15,20 +11,5 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
-
-nav {
- padding: 30px;
-
- a {
- font-weight: bold;
- color: #2c3e50;
-
- &.router-link-exact-active {
- color: #42b983;
- }
- }
}
</style>
diff --git a/src/api/layout/index.js b/src/api/layout/index.js
new file mode 100644
index 0000000..f060fc2
--- /dev/null
+++ b/src/api/layout/index.js
@@ -0,0 +1,7 @@
+import request from "@/router/axios.js"
+
+export const getWeather = () => request({
+ url: 'https://apia.aidioute.cn/weather/index.php',
+ method: 'get',
+ requestBaseUrl: 'open',
+})
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6eb637e..77ad1a0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
-import router from './router'
+import router from './router/pages'
import * as echarts from 'echarts'
import * as ElementUI from 'element-ui'
@@ -12,6 +12,8 @@
import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' //mapv包
import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min' //s3m包
import '@dvgis/dc-sdk/dist/dc.core.min.css' // 主要样式
+
+import axios from './router/axios'
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
@@ -26,7 +28,7 @@
DC.use(DcS3M) //安装DcS3M库
Vue.use(ElementUI)
-
+Vue.use(axios)
new Vue({
router,
diff --git a/src/router/axios.js b/src/router/axios.js
new file mode 100644
index 0000000..af6147d
--- /dev/null
+++ b/src/router/axios.js
@@ -0,0 +1,46 @@
+import axios from "axios"
+
+// 获取公共配置域名
+import { Base64 } from 'js-base64'
+import * as auth from '@/utils/auth'
+
+// 调用后台管理的
+const service = axios.create({
+ timeout: 600000, // request timeout
+})
+
+// 返回其他状态码
+service.defaults.validateStatus = function (status) {
+ return status >= 200 && status <= 500
+}
+
+// 跨域请求，允许保存cookie
+// service.defaults.withCredentials = true
+
+// http request拦截
+service.interceptors.request.use(
+ (config) => {
+ // 调用监控平台的
+ if (config.requestBaseUrl == 'open') {
+ config.baseURL = ''
+ } else {
+ const meta = config.meta || {}
+ const isToken = meta.isToken === false
+ if (auth.getToken() && !isToken) {
+ config.headers['Blade-Auth'] = "bearer " + auth.getToken()
+ }
+ }
+
+ //headers判断是否需要
+ const authorization = config.authorization === false
+ if (!authorization) {
+ config.headers["Authorization"] = `Basic ${Base64.encode("saber:saber_secret")}`
+ }
+ return config
+ },
+ (error) => {
+ return Promise.reject(error)
+ }
+)
+
+export default service
diff --git a/src/router/index.js b/src/router/pages/index.js
similarity index 73%
rename from src/router/index.js
rename to src/router/pages/index.js
index 0fc3fc2..14f0752 100644
--- a/src/router/index.js
+++ b/src/router/pages/index.js
@@ -1,6 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
-import layout from '../views/layout/index.vue'
+import layout from '../../views/layout/index.vue'
Vue.use(VueRouter)
@@ -21,28 +21,28 @@
meta: {
title: '综合统计'
},
- component: () => import('../views/statistics/index.vue')
+ component: () => import('../../views/statistics/index.vue')
},
{
path: 'fireWarning',
meta: {
title: '防火预警'
},
- component: () => import('../views/fireWarning/index.vue')
+ component: () => import('../../views/fireWarning/index.vue')
},
{
path: 'armyLocal',
meta: {
title: '军地协同'
},
- component: () => import('../views/armyLocal/index.vue')
+ component: () => import('../../views/armyLocal/index.vue')
},
{
path: 'management',
meta: {
title: '运维管理'
},
- component: () => import('../views/management/index.vue')
+ component: () => import('../../views/management/index.vue')
}
]
},
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..ce7872a
--- /dev/null
+++ b/src/utils/auth.js
@@ -0,0 +1,35 @@
+export const getToken = () => {
+ return window.sessionStorage.getItem('token')
+}
+
+export const setToken = token => {
+ return window.sessionStorage.setItem('token', token)
+}
+
+export const removeToken = () => {
+ return window.sessionStorage.removeItem('token')
+}
+
+export function getRefreshToken () {
+ return window.sessionStorage.getItem('refresh-token')
+}
+
+export function setRefreshToken (token) {
+ return window.sessionStorage.setItem('refresh-token', token)
+}
+
+export function removeRefreshToken () {
+ return window.sessionStorage.removeItem('refresh-token')
+}
+
+export const getUserInfo = () => {
+ return window.sessionStorage.getItem('userInfo')
+}
+
+export const setUserInfo = user => {
+ return window.sessionStorage.setItem('userInfo', JSON.stringify(user))
+}
+
+export const removeUserInfo = () => {
+ return window.sessionStorage.removeItem('userInfo')
+}
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index b722328..c2c474a 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -55,6 +55,13 @@
</div>
</div>
</div>
+ <div class="weather">
+ <span>{{ weather }}</span><span>{{ temperature}}℃</span>
+ </div>
+ <div class="userInfo">
+ <span>{{ userName }}</span>
+ <div class="exit"><img src="/img/exit.png" alt=""></div>
+ </div>
</div>
</div>
<div class="main-container">
@@ -75,11 +82,12 @@
<script>
import mapBox from '@/components/map/index.vue'
+import { getWeather } from '@/api/layout/index.js'
export default {
name: 'layout',
components: {
- mapBox
+ mapBox,
},
data(){
return {
@@ -113,7 +121,10 @@
userOn: false,
isShowUserDetail: false,
currentUrl: '/layout/statistics',
- time: "----年--月--日 --:--"
+ time: "----年--月--日 --:--",
+ weather:'',
+ temperature:'',
+ userName:'管理员',
}
},
@@ -148,6 +159,11 @@
setInterval(this.getTime, 500);
},
+ // 天气组件
+ currentWeather(){
+ setInterval(this.getWeather, 60000);
+ },
+
// 时间组件
getTime() {
let yy = new Date().getFullYear();
@@ -171,6 +187,11 @@
mounted() {
this.currentTime();
+
+ getWeather().then(res=>{
+ this.weather = res.data.data.weather.weather
+ this.temperature = res.data.data.weather.temp
+ })
},
watch: {
@@ -245,6 +266,8 @@
.menu-list.left {
margin-left: 10px;
+ // width: calc((100% - 450px)/2);
+ justify-content: space-between;
.nav-list {
background: $menu-tab-bg-color;
@@ -253,9 +276,27 @@
.menu-list.right {
margin-right: 72px;
+ // width: calc((100% - 450px)/2);
+ justify-content: space-between;
.nav-list {
background: $menu-tab-bg-color;
+ }
+
+ .weather {
+ width: 100px;
+ font-size: 16px;
+ span:first-child{
+ margin-right: 10px;
+ }
+ }
+
+ .userInfo {
+ font-size: 16px;
+ display: flex;
+ .exit {
+ margin-left: 10px;
+ }
}
}
@@ -290,14 +331,12 @@
width: 100%;
cursor: default;
z-index: 999;
- // transform: skew(58deg);
div {
height: 36px;
text-align: center;
line-height: 36px;
font-size: 16px;
- // background: $bg-blue;
background: $menu-tab-bg-color;
cursor: pointer;
box-sizing: content-box;
@@ -414,18 +453,6 @@
position: relative;
width: 100%;
height: 100%;
-
- .main-content {
- position: absolute;
- top: 60px;
- height: calc(100% - 60px);
- width: 400px;
- z-index: 99;
- }
-
- .main-content.take-back {
- width: 0px;
- }
}
}
</style>
diff --git a/src/views/statistics/components/leftContainer.vue b/src/views/statistics/components/leftContainer.vue
new file mode 100644
index 0000000..17b46f4
--- /dev/null
+++ b/src/views/statistics/components/leftContainer.vue
@@ -0,0 +1,31 @@
+<template>
+ <div class="container">
+ <h1 style="color:red;font-size:40px,">左边！！</h1>
+ </div>
+</template>
+
+<script>
+export default {
+ data(){
+ return {
+
+ }
+ },
+ methods:{}
+}
+
+</script>
+
+<style scoped lang="scss">
+ .container {
+ position: relative;
+ width: 100%;
+ background-color: blue;
+ h1{
+ height: 50%;
+ width: 80%;
+ background-color: red;
+ }
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/views/statistics/components/rightContainer.vue b/src/views/statistics/components/rightContainer.vue
new file mode 100644
index 0000000..2519d26
--- /dev/null
+++ b/src/views/statistics/components/rightContainer.vue
@@ -0,0 +1,26 @@
+<template>
+ <div class="container">
+ 'right'
+ </div>
+</template>
+
+<script>
+export default {
+ data(){
+ return {
+
+ }
+ },
+ methods:{}
+}
+
+</script>
+
+<style scoped lang="scss">
+ .container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
index b792515..febb64a 100644
--- a/src/views/statistics/index.vue
+++ b/src/views/statistics/index.vue
@@ -1,12 +1,18 @@
<template>
<div class="container">
- 'statistics'
+ <left-container class="left-container"></left-container>
+ <right-container class="right-container"></right-container>
</div>
</template>
<script>
+import leftContainer from './components/leftContainer'
+import rightContainer from './components/rightContainer'
+
export default {
name: 'statistics',
+ components:{leftContainer,rightContainer},
+
data(){
return {
@@ -20,6 +26,28 @@
<style scoped lang="scss">
.container {
position: relative;
+ width: 100%;
+ .left-container {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 60px;
+ left: 0;
+ width: 400px;
+ height: calc(100vh - 60px);
+ z-index: 90;
+ }
+
+ .right-container {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ width: 400px;
+ height: calc(100vh - 60px);
+ z-index: 90;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3