Skip to content

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

styleFix

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