Commit a3d1c564 authored by 张牧越's avatar 张牧越

数字工地 实名制页面完成

parent 786d7acb
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names": "off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -8,9 +8,22 @@ ...@@ -8,9 +8,22 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.3.4",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.4.2", "echarts": "^5.4.2",
"vue": "^2.6.14" "element-ui": "^2.15.13",
"lib-flexible": "^0.3.2",
"precss": "^4.0.0",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vue-seamless-scroll": "^1.1.23"
},
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
...@@ -20,6 +33,12 @@ ...@@ -20,6 +33,12 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"postcss-plugin-px2rem": "^0.8.1",
"px2rem-loader": "^0.1.9",
"style-resources-loader": "^1.5.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
}, },
"eslintConfig": { "eslintConfig": {
......
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
<title><%= htmlWebpackPlugin.options.title %></title> <title>
</head> 绍兴二院兰亭院区(康复医院)工程
<body> </title>
</head>
<body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
\ No newline at end of file
<template> <template>
<div id="app"> <div id="app">
<img alt="Vue logo" src="./assets/logo.png"> <router-view></router-view>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> </div>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.vue'
export default { export default {
name: 'App', name: "App",
components: { components: {},
HelloWorld };
}
}
</script> </script>
<style> <style>
* {
margin: 0;
padding: 0;
}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; margin: 0px;
-webkit-font-smoothing: antialiased; background: url(assets/background.png) no-repeat;
-moz-osx-font-smoothing: grayscale; background-size: 100% 100%;
text-align: center; background-attachment: fixed;
color: #2c3e50; min-height: 100vh;
margin-top: 60px;
} }
</style> </style>
import request from "@/utils/request"
export function postAction() {
return request({
url: '',
method: 'get',
})
}
\ No newline at end of file
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div>
<div class="nav-header">
<div class="left-nav">
<span>XXX项目后台管理系统</span>
<router-link to="/">数字工地</router-link>
<router-link to="/realname">实名制</router-link>
<router-link to="/supervisory">视频监控</router-link>
<router-link to="/earlywarning">AI预警</router-link>
</div>
<div class="mid-title">绍兴二院兰亭院区(康复医院)工程</div>
<div class="right-nav">
<router-link to="/tower" style="margin-left: 40px"
>塔吊监测</router-link
>
<router-link to="/noise">扬尘噪音</router-link>
<div class="clock">
<div class="time">
{{ time }}
</div>
<div class="date">
<div class="week">{{ weekDay }}</div>
<div class="day">{{ date }}</div>
</div>
</div>
</div>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
time: "",
weekDay: "",
date: "",
};
},
methods: {
getTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
let today = year + "-" + month + "-" + day;
this.date = today;
let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let min =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let sec =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.time = `${hour}:${min}:${sec}`;
let str = "星期";
let weekDay = new Date().getDay();
switch (weekDay) {
case 0:
str += "日";
break;
case 1:
str += "一";
break;
case 2:
str += "二";
break;
case 3:
str += "三";
break;
case 4:
str += "四";
break;
case 5:
str += "五";
break;
case 6:
str += "六";
break;
}
this.weekDay = str;
},
},
mounted() {
this.getTime();
setInterval(() => {
this.getTime();
}, 1000);
},
};
</script>
<style scoped lang="less">
.nav-header {
display: flex;
align-content: center;
line-height: 70px;
padding: 0 18px;
min-height: 78px;
height: 7.22vh;
margin: 0px;
background: url("@/assets/nav.png") no-repeat;
background-size: 100% 100%;
.left-nav {
width: calc(100% / 3);
span {
color: #fff;
margin-right: 16px;
}
}
.mid-title {
width: calc(100% / 3);
font-size: 28px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fefeff;
text-align: center;
letter-spacing: 3px;
}
.right-nav {
width: calc(100% / 3);
text-align: left;
.clock {
float: right;
width: 124px;
text-align: center;
.time {
text-align: center;
font-size: 24px;
color: #22c3ed;
letter-spacing: 4px;
line-height: 46px;
}
.date {
font-size: 12px;
color: #fff;
display: flex;
justify-content: space-between;
line-height: 14px;
}
}
}
}
a {
min-width: 66px;
text-align: center;
display: inline-block;
text-decoration: none;
margin-right: 16px;
color: #80a1c6;
padding: 9px 12px;
border: 1px solid #0f5da6;
border-radius: 4px;
line-height: 16px;
font-size: 16px;
background-image: linear-gradient(#0d3353, #183e75);
&:hover {
color: #fff;
border-color: #27acfb;
position: relative;
&::after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
border-right: solid 6px transparent;
border-left: solid 6px transparent;
border-bottom: solid 6px #22c3ed;
filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
}
}
}
.router-link-exact-active.router-link-active {
color: #fff;
border-color: #27acfb;
position: relative;
}
.router-link-exact-active.router-link-active::after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
border-right: solid 6px transparent;
border-left: solid 6px transparent;
border-bottom: solid 6px #22c3ed;
filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
}
</style>
\ No newline at end of file
<template>
<div class="shadow-container">
<slot />
</div>
</template>
<script>
export default {
name: "ShadowContainer",
};
</script>
<style lang="less" scoped>
.shadow-container {
position: relative;
border-radius: 10px;
padding: 20px;
border: 2px solid;
background: linear-gradient(
0deg,
rgba(4, 79, 129, 0.1) 0%,
rgba(15, 60, 89, 0.35) 28%,
#0b2950 100%
);
border-image: linear-gradient(
0deg,
rgba(255, 255, 255, 0),
rgba(7, 35, 65, 0.8),
rgba(25, 85, 117, 0.8),
rgba(15, 149, 212, 0.8)
)
2 2;
clip-path: inset(0 round 5px); //裁剪
margin-bottom: 10px;
}
.shadow-container::after {
content: "";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: 2px;
left: -2px;
border-radius: 6px;
border-top: 2px solid;
border-color: rgba(15, 149, 212, 0.8);
pointer-events: none;
}
</style>
\ No newline at end of file
<template>
<div v-if="type == 'short'" class="title short">{{ text }}</div>
<div v-else class="title long">{{ text }}</div>
</template>
<script>
export default {
name: "Title",
props: {
type: {
type: String,
default: "short",
},
text: {
type: String,
default: "",
},
},
};
</script>
<style lang="less" scoped>
.title {
margin-bottom: 8px;
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
letter-spacing: 2px;
}
.short {
background: url("@/assets/title-short.png") no-repeat;
background-size: 100% 100%;
}
.long {
background: url("@/assets/title-long.png") no-repeat;
background-size: 100% 100%;
}
</style>
\ No newline at end of file
This diff is collapsed.
<template>
<div>test2</div>
</template>
\ No newline at end of file
This diff is collapsed.
<template>
<div>test4</div>
</template>
\ No newline at end of file
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from '@/router/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'lib-flexible'
import Title from "@/components/Title"
import ShadowContainer from "@/components/ShadowContainer"
import * as echarts from "echarts"
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.component('Title', Title)
Vue.component('ShadowContainer', ShadowContainer)
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router
}).$mount('#app') }).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "@/components/Index"
import Construction from "@/components/construction/Index"
import RealName from "@/components/realname/Index"
import EarlyWarning from "@/components/earlywarning/Index"
import Supervisory from "@/components/supervisory/Index"
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/', component: Index,
children: [
{ path: '', component: Construction },
{ path: 'realname', component: RealName },
{ path: 'earlywarning', component: EarlyWarning },
{ path: 'supervisory', component: Supervisory },
]
},
]
})
export default router
\ No newline at end of file
import axios from 'axios'
const request = axios.create({
withCredentials: false
})
request.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['X-Access-Token'] = token
}
return config
},
error => {
console.log('error', error)
return Promise.reject(new Error(error).message)
}
)
request.interceptors.response.use(
response => {
console.log('.....', response)
return response.data
},
error => {
console.log('error', error)
return Promise.reject(new Error(error).message)
}
)
export default request
const { defineConfig } = require('@vue/cli-service') const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true transpileDependencies: true,
productionSourceMap: false,
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 55,
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
},
publicPath: process.env.NODE_ENV == 'production' ? './' : '/',
devServer: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: false,
changeOrigin: true,
pathRewrite: {
'/api': ''
}
},
}
},
lintOnSave: true,
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: []
}
},
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75
})
}
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment