Skip to content

D
digital-construction
Commit 0b123c81 authored by 张牧越's avatar 张牧越
Browse files
Options

styleFix

parent 8843ba60
Show whitespace changes
Inline Side-by-side
Showing with 247 additions and 100 deletions
public/index.html
View file @ 0b123c81
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</style> </style>
</head> </head>
<body style="min-width: 1300px;height:100%"> <body style="height:100%">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong> Please enable it to continue.</strong>
......
src/App.vue
View file @ 0b123c81
...@@ -47,7 +47,6 @@ body { ...@@ -47,7 +47,6 @@ body {
background: url(assets/background.png) no-repeat; background: url(assets/background.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh;
} }
#app { #app {
height: 100%; height: 100%;
......
src/api/index.js
View file @ 0b123c81
import request from "@/utils/request" import request from "@/utils/request"
import noLoadingrequest from "@/utils/request"
export function getXAccessToken(token) { export function getXAccessToken(token) {
return request({ return request({
...@@ -66,7 +66,7 @@ export function getInOutData() { ...@@ -66,7 +66,7 @@ export function getInOutData() {
} }
export function getCurrentAttendance(params) { export function getCurrentAttendance(params) {
return request({ return noLoadingrequest({
url: '/pweb/s/personel/attendance', url: '/pweb/s/personel/attendance',
method: 'get', method: 'get',
params params
...@@ -131,7 +131,7 @@ export function getAIdata() { ...@@ -131,7 +131,7 @@ export function getAIdata() {
} }
export function getWarningList(params) { export function getWarningList(params) {
return request({ return noLoadingrequest({
url: '/pweb/s/aiwarning/list', url: '/pweb/s/aiwarning/list',
method: 'get', method: 'get',
params params
...@@ -191,7 +191,7 @@ export function getTowerDeviceList() { ...@@ -191,7 +191,7 @@ export function getTowerDeviceList() {
} }
export function getCurrentTowerStatis(params) { export function getCurrentTowerStatis(params) {
return request({ return noLoadingrequest({
url: '/pweb/s/towercrane/device/actual', url: '/pweb/s/towercrane/device/actual',
method: 'get', method: 'get',
params params
......
src/components/Index.vue
View file @ 0b123c81
...@@ -57,11 +57,30 @@ ...@@ -57,11 +57,30 @@
<div class="right-nav"> <div class="right-nav">
<template v-for="(router, index) in rightNav"> <template v-for="(router, index) in rightNav">
<router-link <router-link
v-if="router.child && router.child.length == 0"
:key="index" :key="index"
:to="{ path: router.menu_url, query: { token_code: token } }" :to="{ path: router.menu_url, query: { token_code: token } }"
> >
{{ router.right_name }}</router-link {{ router.right_name }}</router-link
> >
<el-dropdown v-else :key="index" placement="bottom">
<div class="parent-router">
{{ router.right_name }}
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(child, cIndex) in router.child"
:key="cIndex"
>
<router-link
:to="{ path: child.menu_url, query: { token_code: token } }"
>
{{ child.right_name }}</router-link
>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
<div class="clock"> <div class="clock">
...@@ -140,10 +159,9 @@ export default { ...@@ -140,10 +159,9 @@ export default {
this.weekDay = str; this.weekDay = str;
}, },
bodyScale() { bodyScale() {
var deviceHeight = window.screen.height; //获取当前分辨率下的可是区域宽度 var deviceHeight = window.screen.height;
var scale = deviceHeight / 1080; // 分母——设计稿的尺寸 var scale = deviceHeight / 1230;
document.body.style.zoom = scale; //放大缩小相应倍数 document.body.style.zoom = scale;
document.styleSheets[document.styleSheets.length - 1].insertRule( document.styleSheets[document.styleSheets.length - 1].insertRule(
"canvas {zoom: " + 1 / scale + "}" "canvas {zoom: " + 1 / scale + "}"
); );
...@@ -165,15 +183,23 @@ export default { ...@@ -165,15 +183,23 @@ export default {
}, },
mounted() { mounted() {
getBaseInfo().then((res) => { getBaseInfo().then((res) => {
console.log(res);
this.screenDetail = res.data; this.screenDetail = res.data;
document.title = res.data.project_name; document.title = res.data.project_name;
if (window.screen.width < 1800) {
if (res.data.menu.length >= 3) {
this.leftNav = res.data.menu.slice(0, 3);
this.rightNav = res.data.menu.slice(3, res.data.menu.length);
} else {
this.leftNav = [...res.data.menu];
}
} else {
if (res.data.menu.length >= 4) { if (res.data.menu.length >= 4) {
this.leftNav = res.data.menu.slice(0, 4); this.leftNav = res.data.menu.slice(0, 4);
this.rightNav = res.data.menu.slice(4, res.data.menu.length); this.rightNav = res.data.menu.slice(4, res.data.menu.length);
} else { } else {
this.leftNav = [...res.data.menu]; this.leftNav = [...res.data.menu];
} }
}
}); });
this.bodyScale(); this.bodyScale();
......
src/components/construction/Index.vue
View file @ 0b123c81
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<ShadowContainer> <ShadowContainer>
<div class="construction-status"> <div class="construction-status">
<div class="construction-details"> <div class="construction-details">
<img src="@/assets/icon-short-bg.png" alt="" />
<div class="construction-detail"> <div class="construction-detail">
<div class="data">{{ screenDetail.project_cost }}</div> <div class="data">{{ screenDetail.project_cost }}</div>
<div class="text">工程造价(万元)</div> <div class="text">工程造价(万元)</div>
...@@ -36,8 +35,7 @@ ...@@ -36,8 +35,7 @@
<div class="divider-text">·参建单位·</div> <div class="divider-text">·参建单位·</div>
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="table-scroll" id="table-scroll">
<div class="table-scroll">
<table> <table>
<tr> <tr>
<td width="60"> <td width="60">
...@@ -158,7 +156,7 @@ ...@@ -158,7 +156,7 @@
<img class="rt" src="@/assets/rt.png" alt="" /> <img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" /> <img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" /> <img class="lb" src="@/assets/lb.png" alt="" />
<el-carousel :interval="5000" arrow="always" height="520px"> <el-carousel :interval="5000" arrow="always" height="530px">
<el-carousel-item <el-carousel-item
v-for="(item, index) in screenDetail.banner_image_arr" v-for="(item, index) in screenDetail.banner_image_arr"
:key="index" :key="index"
...@@ -172,7 +170,6 @@ ...@@ -172,7 +170,6 @@
<ShadowContainer> <ShadowContainer>
<div class="progress-contains"> <div class="progress-contains">
<div class="progress"> <div class="progress">
<img src="@/assets/icon-long-bg.png" alt="" />
<div class="progress-container"> <div class="progress-container">
<div class="progress-day"> <div class="progress-day">
<div class="progress-count">{{ progressDetail.zgq_num }}</div> <div class="progress-count">{{ progressDetail.zgq_num }}</div>
...@@ -192,11 +189,6 @@ ...@@ -192,11 +189,6 @@
</div> </div>
</div> </div>
</div> </div>
<div
class="steps"
@mouseleave="mouseLeaveEvent"
@mouseover="mouseOverEvent"
>
<div id="step-scroll"> <div id="step-scroll">
<el-steps :active="progressDetail.step" finish-status="success"> <el-steps :active="progressDetail.step" finish-status="success">
<el-step <el-step
...@@ -216,7 +208,6 @@ ...@@ -216,7 +208,6 @@
</el-steps> </el-steps>
</div> </div>
</div> </div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="side-area"> <div class="side-area">
...@@ -459,6 +450,11 @@ export default { ...@@ -459,6 +450,11 @@ export default {
getBaseData().then((res) => { getBaseData().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.screenDetail = res.data; this.screenDetail = res.data;
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
} }
}); });
...@@ -470,21 +466,22 @@ export default { ...@@ -470,21 +466,22 @@ export default {
getProgressDetail().then((res) => { getProgressDetail().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.progressDetail = res.data; this.progressDetail = res.data;
if (res.data.progress_data.length > 6) { // if (res.data.progress_data.length > 6) {
document.getElementById("step-scroll").style.width = // document.getElementById("step-scroll").style.width =
2 * res.data.progress_data.length + "rem"; // 2 * res.data.progress_data.length + "rem";
document.getElementById("step-scroll").style.animationDuration = // document.getElementById("step-scroll").style.animationDuration =
res.data.progress_data.length / 2 + "s"; // res.data.progress_data.length / 2 + "s";
} // }
this.$nextTick(() => { this.$nextTick(() => {
const lines = document.getElementsByClassName( const lines = document.getElementsByClassName(
"el-step__line-inner" "el-step__line-inner"
); );
if (lines.length > 2) {
lines[this.progressDetail.step - 1].style.width = lines[this.progressDetail.step - 1].style.width =
res.data.current_progress_rate + "%"; res.data.current_progress_rate + "%";
lines[this.progressDetail.step - 1].style.borderWidth = "1px"; lines[this.progressDetail.step - 1].style.borderWidth = "1px";
console.log(document.getElementsByClassName("el-step__line-inner")); }
}); });
} }
}); });
...@@ -495,6 +492,32 @@ export default { ...@@ -495,6 +492,32 @@ export default {
}, },
mouseLeaveEvent() {}, mouseLeaveEvent() {},
mouseOverEvent() {}, mouseOverEvent() {},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
var sTop = element.scrollTop;
element.scrollTop += stepLength;
if (
sTop === element.scrollTop ||
sTop == 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
stepLength *= -1; // 转换方向
clearInterval(interval);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
}, },
mounted() { mounted() {
this.getBaseData(); this.getBaseData();
...@@ -551,7 +574,9 @@ export default { ...@@ -551,7 +574,9 @@ export default {
text-align: center; text-align: center;
margin-bottom: 28px; margin-bottom: 28px;
position: relative; position: relative;
padding-top: 20px; padding: 24px 0;
background: url("@/assets/icon-short-bg.png") no-repeat;
background-size: 100% 100%;
img { img {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -680,9 +705,8 @@ table { ...@@ -680,9 +705,8 @@ table {
} }
.progress-container { .progress-container {
width: 100%; width: 100%;
position: absolute; background: url("@/assets/icon-long-bg.png") no-repeat;
top: 0; background-size: 100% 100%;
left: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.progress-day { .progress-day {
...@@ -708,7 +732,7 @@ table { ...@@ -708,7 +732,7 @@ table {
position: relative; position: relative;
.container-img { .container-img {
width: 100%; width: 100%;
height: 520px; height: 100%;
vertical-align: top; vertical-align: top;
} }
.lt, .lt,
...@@ -742,18 +766,15 @@ table { ...@@ -742,18 +766,15 @@ table {
flex-wrap: wrap; flex-wrap: wrap;
.status-count { .status-count {
width: calc(100% / 3); width: calc(100% / 3);
padding: 20px 0px; padding: 30px 0px;
margin-bottom: 20px;
.status-img { .status-img {
width: 64px; width: 40%;
height: 64px;
} }
.status-detail { .status-detail {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.status-text { .status-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
padding-top: 12px; padding-top: 12px;
...@@ -788,7 +809,7 @@ table { ...@@ -788,7 +809,7 @@ table {
} }
} }
.table-scroll { .table-scroll {
max-height: 360px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.check-in { .check-in {
...@@ -819,17 +840,8 @@ table { ...@@ -819,17 +840,8 @@ table {
} }
} }
} }
@keyframes scrolls {
0% { #step-scroll {
transform: translateX(0%); margin-top: 32px;
}
100% {
transform: translateX(calc(-100% - 13rem));
}
}
.step-scroll {
animation-name: scrolls;
animation-iteration-count: infinite;
animation-timing-function: linear;
} }
</style> </style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ 0b123c81
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="today-warning"> <div class="today-warning">
<Title type="long" text="今日预警"></Title> <Title type="long" text="今日预警"></Title>
<ShadowContainer> <ShadowContainer>
<div class="warp"> <div class="warp" id="warning-list">
<div <div
class="person-check" class="person-check"
v-for="(warns, index) in warningList" v-for="(warns, index) in warningList"
...@@ -78,6 +78,10 @@ ...@@ -78,6 +78,10 @@
<div class="time">时间：{{ warns.log_time_cn }}</div> <div class="time">时间：{{ warns.log_time_cn }}</div>
</div> </div>
</div> </div>
<div v-if="warningList.length == 0" class="no-data">
<img src="@/assets/nodata.png" alt="" />
<div>暂无数据！</div>
</div>
</div> </div>
</ShadowContainer> </ShadowContainer>
</div> </div>
...@@ -428,6 +432,10 @@ export default { ...@@ -428,6 +432,10 @@ export default {
} }
}); });
}, 60000); }, 60000);
this.$nextTick(() => {
const element = document.getElementById("warning-list");
this.autoScroll(1, 50, 1500, element);
});
} }
}); });
// 今日统计 // 今日统计
...@@ -449,6 +457,32 @@ export default { ...@@ -449,6 +457,32 @@ export default {
} }
}); });
}, },
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
var sTop = element.scrollTop;
element.scrollTop += stepLength;
if (
sTop === element.scrollTop ||
sTop == 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
}, },
mounted() { mounted() {
...@@ -597,4 +631,14 @@ export default { ...@@ -597,4 +631,14 @@ export default {
height: 268px; height: 268px;
} }
} }
.no-data {
text-align: center;
font-size: 24px;
color: #1abcec;
img {
width: 300px;
margin: 0 auto;
vertical-align: top;
}
}
</style> </style>
\ No newline at end of file
src/components/elevator/Index.vue
View file @ 0b123c81
...@@ -90,10 +90,17 @@ ...@@ -90,10 +90,17 @@
:key="index" :key="index"
> >
<div class="warning-table-time">{{ column.log_time }}</div> <div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-device"></div> <div class="warning-table-device">{{ column.device_no }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-message"> <div class="warning-table-message">
{{ column.alarm_content }} {{ column.alarm_content }}
</div> </div>
</el-tooltip>
<div <div
class="warning-table-status" class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }" :style="{ color: column.status == 1 ? '#FFC74C' : '' }"
...@@ -107,7 +114,7 @@ ...@@ -107,7 +114,7 @@
</div> </div>
<div class="elevator-container"> <div class="elevator-container">
<ShadowContainer> <ShadowContainer>
<div style="height: 980px" id="elevator-detail"> <div style="height: 930px" id="elevator-detail">
<div class="left-detail"> <div class="left-detail">
<template <template
v-if=" v-if="
...@@ -406,10 +413,11 @@ export default { ...@@ -406,10 +413,11 @@ export default {
} }
#elevator-description { #elevator-description {
height: 340px; height: 290px;
overflow-y: scroll; overflow-y: scroll;
.elevator { .elevator {
background: rgba(44, 96, 162, 0.2); background: rgba(44, 96, 162, 0.2);
margin-bottom: 6px;
&.active { &.active {
background: rgba(44, 96, 162, 0.5); background: rgba(44, 96, 162, 0.5);
} }
...@@ -548,6 +556,11 @@ export default { ...@@ -548,6 +556,11 @@ export default {
.warning-table-status { .warning-table-status {
width: 20%; width: 20%;
} }
.warning-table-message {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
} }
#elevator-detail { #elevator-detail {
display: flex; display: flex;
...@@ -600,7 +613,7 @@ export default { ...@@ -600,7 +613,7 @@ export default {
height: 10px; height: 10px;
} }
.tower { .tower {
height: 970px; height: 920px;
} }
} }
.driver-info { .driver-info {
......
src/components/noise/Index.vue
View file @ 0b123c81
...@@ -544,10 +544,10 @@ export default { ...@@ -544,10 +544,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.side-area { .side-area {
width: 25%; width: 28%;
} }
.mid-area { .mid-area {
width: calc(50% - 40px); width: calc(44% - 40px);
margin: 0 20px; margin: 0 20px;
} }
} }
...@@ -809,7 +809,7 @@ export default { ...@@ -809,7 +809,7 @@ export default {
} }
#stats-container { #stats-container {
position: relative; position: relative;
margin-bottom: 70px; margin-bottom: 60px;
img { img {
width: 100%; width: 100%;
} }
......
src/components/realname/Index.vue
View file @ 0b123c81
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<div class="mid-area"> <div class="mid-area">
<Title text="实时考勤"></Title> <Title text="实时考勤"></Title>
<ShadowContainer> <ShadowContainer>
<div class="warp"> <div class="warp" id="warp-list">
<div <div
class="person-check" class="person-check"
v-for="(person, index) in checkList" v-for="(person, index) in checkList"
...@@ -115,6 +115,10 @@ ...@@ -115,6 +115,10 @@
<div class="time">时间：{{ person.record_time_cn }}</div> <div class="time">时间：{{ person.record_time_cn }}</div>
</div> </div>
</div> </div>
<div v-if="checkList.length == 0" class="no-data">
<img src="@/assets/nodata.png" alt="" />
<div>暂无数据！</div>
</div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="人员地域分布"></Title> <Title text="人员地域分布"></Title>
...@@ -603,13 +607,6 @@ export default { ...@@ -603,13 +607,6 @@ export default {
); );
}); });
}, },
resetSize(obj) {
let screenWidth =
document.body.clientWidth || document.documentElement.clientWidth;
let defWidth = 1920;
let xScale = screenWidth / defWidth;
obj.style.zoom = 1 / xScale;
},
}, },
mounted() { mounted() {
this.getTime(); this.getTime();
...@@ -801,4 +798,14 @@ export default { ...@@ -801,4 +798,14 @@ export default {
max-height: 270px; max-height: 270px;
overflow-y: scroll; overflow-y: scroll;
} }
.no-data {
text-align: center;
font-size: 24px;
color: #1abcec;
img {
width: 200px;
margin: 0 auto;
vertical-align: top;
}
}
</style> </style>
\ No newline at end of file
src/utils/noloadingRequest.js 0 → 100644
View file @ 0b123c81
import axios from 'axios'
import { Message } from 'element-ui';
import _ from 'lodash';
const noLoadingrequest = axios.create({
withCredentials: false,
baseURL: process.env.VUE_APP_BASE_API,
})
noLoadingrequest.interceptors.request.use(
config => {
const Authorization = localStorage.getItem('Authorization')
if (Authorization) {
config.headers['Authorization'] = Authorization
}
return config
},
error => {
closeLoading()
return Promise.reject(new Error(error).message)
}
)
noLoadingrequest.interceptors.response.use(
response => {
if (response.data.status != 200) {
Message({
message: response.data.msg,
type: 'error'
})
}
if (response.data.status == 401) {
window.location.href = process.env.VUE_APP_API_URL + 'pweb/m/login?is_screen=1'
}
return response.data
},
error => {
console.log(error)
return Promise.reject(new Error(error).message)
}
)
export default noLoadingrequest
vue.config.js
View file @ 0b123c81
...@@ -7,11 +7,11 @@ module.exports = defineConfig({ ...@@ -7,11 +7,11 @@ module.exports = defineConfig({
postcss: { postcss: {
postcssOptions: { postcssOptions: {
plugins: [ plugins: [
require('postcss-plugin-px2rem')({ // require('postcss-plugin-px2rem')({
rootValue: 54, // rootValue: 100,
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。 // mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0 // minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}), // }),
] ]
} }
......
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