Skip to content

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

样式修正

parent cc995d9f
Show whitespace changes
Inline Side-by-side
Showing with 455 additions and 218 deletions
src/assets/common/element.less
View file @ b8e95357
...@@ -186,7 +186,18 @@ ...@@ -186,7 +186,18 @@
} }
} }
::v-deep .el-step__icon {
width: 16px;
height: 16px;
vertical-align: top;
}
::v-deep .el-divider { ::v-deep .el-divider {
background: #5f7890; background: #5f7890;
opacity: 0.5; opacity: 0.5;
} }
::v-deep .el-step__line {
top: 50% !important;
transform: translateY(-50%) !important;
}
\ No newline at end of file
src/components/Index.vue
View file @ b8e95357
...@@ -347,10 +347,10 @@ a, ...@@ -347,10 +347,10 @@ a,
padding: 0 30px; padding: 0 30px;
} }
.weather { .weather {
display: inline-block; display: flex;
flex-wrap: nowrap;
line-height: 24px; line-height: 24px;
vertical-align: top; vertical-align: top;
margin-right: 20px;
margin-top: 8px; margin-top: 8px;
.weather-text { .weather-text {
color: #fff; color: #fff;
...@@ -359,9 +359,9 @@ a, ...@@ -359,9 +359,9 @@ a,
} }
.weather-img { .weather-img {
vertical-align: top; vertical-align: top;
width: 50px; width: 40px;
height: 50px; height: 40px;
margin-right: 6px; margin-right: 4px;
} }
} }
.el-dropdown { .el-dropdown {
...@@ -386,7 +386,7 @@ a, ...@@ -386,7 +386,7 @@ a,
} }
.invisible { .invisible {
height: 100%; height: 100%;
width: 60px; width: 40px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
......
src/components/ShadowContainerRect.vue 0 → 100644
View file @ b8e95357
<template>
<div class="shadow-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<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;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.lt,
.lb,
.rb,
.rt {
position: absolute;
width: 20px;
height: 20px;
}
.lt {
top: -2px;
left: -2px;
}
.lb {
left: -2px;
bottom: -2px;
}
.rb {
right: -2px;
bottom: -2px;
}
.rt {
right: -2px;
top: -2px;
}
.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
src/components/construction/Index.vue
View file @ b8e95357
...@@ -169,7 +169,12 @@ ...@@ -169,7 +169,12 @@
v-for="(item, index) in screenDetail.banner_image_arr" v-for="(item, index) in screenDetail.banner_image_arr"
:key="index" :key="index"
> >
<img class="container-img" :src="item.url" alt="" /> <!-- <img class="container-img" :src="item.url" alt="" /> -->
<el-image
style="width: 100%; height: 100%"
:src="item.url"
fit="cover"
></el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
...@@ -213,6 +218,20 @@ ...@@ -213,6 +218,20 @@
<div class="step-description">{{ progress.name }}</div> <div class="step-description">{{ progress.name }}</div>
</template> </template>
</el-step> </el-step>
<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> </el-steps>
</div> </div>
</div> </div>
...@@ -242,7 +261,35 @@ ...@@ -242,7 +261,35 @@
</ShadowContainer> </ShadowContainer>
<Title text="AI预警"> </Title> <Title text="AI预警"> </Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
<div style="display: flex">
<div class="chart-container">
<div ref="qualityChart" id="quality-chart"></div> <div ref="qualityChart" id="quality-chart"></div>
<div class="title">
<div class="main-title">
{{ AIwarningTotal }}
</div>
<div class="sub-title">AI预警</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in aiwarningData"
:key="index"
:style="{
color: legend.name == '已处理' ? '#AEE4F8' : '#FF754C',
}"
>
<span
class="rect"
:style="{
background: legend.name == '已处理' ? '#AEE4F8' : '#FF754C',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
</div> </div>
...@@ -258,82 +305,10 @@ export default { ...@@ -258,82 +305,10 @@ export default {
name: "Construction", name: "Construction",
data() { data() {
return { return {
constructionUnits: [ constructionUnits: [],
{
unitText: "建设单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "施工单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "监理单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "设计单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
],
pieChartData: [
{ value: 1048, name: "未整改" },
{ value: 735, name: "整改中" },
{ value: 580, name: "已完成" },
],
personData: [], personData: [],
active: 4, active: 4,
deviceStatus: [ deviceStatus: [],
{
img: require("@/assets/status/icon_spjk@2x.png"),
text: "视频监控",
counts: 1,
},
{
img: require("@/assets/status/icon_td@2x.png"),
text: "塔吊",
counts: 2,
},
{
img: require("@/assets/status/icon_sjt@2x.png"),
text: "升降机",
counts: 2,
},
{
img: require("@/assets/status/icon_hjgl@2x.png"),
text: "环境管理",
counts: 2,
},
{
img: require("@/assets/status/icon_ydjc@2x.png"),
text: "用电监测",
counts: 1,
},
{
img: require("@/assets/status/icon_zccl@2x.png"),
text: "在场车辆",
counts: 1,
},
{
img: require("@/assets/status/icon_sb@2x.png"),
text: "水表",
counts: 1,
},
{
img: require("@/assets/status/icon_lbfh@2x.png"),
text: "临边防护",
counts: 1,
},
{
img: require("@/assets/status/icon_xlt@2x.png"),
text: "卸料平台",
counts: 1,
},
],
screenDetail: { screenDetail: {
unitList: { unitList: {
sgList: [], sgList: [],
...@@ -353,6 +328,7 @@ export default { ...@@ -353,6 +328,7 @@ export default {
current_progress_over_day: 0, current_progress_over_day: 0,
}, },
aiwarningData: [], aiwarningData: [],
AIwarningTotal: 0,
}; };
}, },
methods: { methods: {
...@@ -361,71 +337,16 @@ export default { ...@@ -361,71 +337,16 @@ export default {
this.aiwarningData.map((item) => { this.aiwarningData.map((item) => {
total += item.value; total += item.value;
}); });
this.AIwarningTotal = total;
const chart = this.$echarts.init(this.$refs.qualityChart); const chart = this.$echarts.init(this.$refs.qualityChart);
const option = { const option = {
title: {
x: "49%", //X坐标
y: "27%",
text: total,
subtext: "AI预警",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
bottom: "0%",
left: "center",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 16,
verticalAlign: "top",
align: "left",
padding: [22, 0, 0, 5],
},
b: {
fontSize: 18,
align: "left",
lineHeight: 25,
padding: [0, 0, 0, 7],
},
},
},
formatter: (name) => {
let data = this.aiwarningData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}}`];
return arr.join("\n");
},
},
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["58%", "70%"], radius: ["58%", "70%"],
center: ["50%", "40%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 20, borderRadius: 20,
...@@ -546,12 +467,11 @@ export default { ...@@ -546,12 +467,11 @@ export default {
padding-bottom: 0; padding-bottom: 0;
} }
.side-area { .side-area {
width: 460px; width: 400px;
height: 100%; height: 100%;
} }
.mid-area { .mid-area {
width: calc(50% - 40px); width: calc(100% - 824px);
margin: 0 20px;
height: 100%; height: 100%;
} }
.divider { .divider {
...@@ -650,7 +570,7 @@ table { ...@@ -650,7 +570,7 @@ table {
th, th,
td { td {
border: 1px solid #097ca7; border: 1px solid #097ca7;
padding: 20px; padding: 14px;
} }
.unit-text { .unit-text {
font-size: 14px; font-size: 14px;
...@@ -668,25 +588,39 @@ table { ...@@ -668,25 +588,39 @@ table {
} }
.unit-contact { .unit-contact {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #99a9d0; color: #99a9d0;
} }
} }
.chart-container { .chart-container {
position: relative; position: relative;
.custom-chart { width: 200px;
height: 200px;
.title {
position: absolute; position: absolute;
width: 20%; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%); text-align: center;
top: 18%; transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
} }
} }
#security-chart,
#quality-chart { #quality-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
} }
.steps { .steps {
padding-top: 40px; padding-top: 40px;
...@@ -699,7 +633,7 @@ table { ...@@ -699,7 +633,7 @@ table {
.step-status { .step-status {
position: absolute; position: absolute;
top: -170%; top: -130%;
color: #18d7b9; color: #18d7b9;
font-size: 12px; font-size: 12px;
} }
...@@ -710,7 +644,12 @@ table { ...@@ -710,7 +644,12 @@ table {
} }
.progress-contains { .progress-contains {
padding: 8px 0; display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
} }
.progress { .progress {
position: relative; position: relative;
...@@ -748,8 +687,8 @@ table { ...@@ -748,8 +687,8 @@ table {
height: 100%; height: 100%;
.container-img { .container-img {
width: 100%; width: 100%;
height: 100%;
vertical-align: top; vertical-align: top;
object-fit: cover;
} }
.lt, .lt,
.lb, .lb,
...@@ -830,8 +769,13 @@ table { ...@@ -830,8 +769,13 @@ table {
} }
.check-in { .check-in {
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
.checks { .checks {
width: 50%; width: 50%;
text-align: center; text-align: center;
...@@ -859,12 +803,13 @@ table { ...@@ -859,12 +803,13 @@ table {
#step-scroll { #step-scroll {
margin-top: 32px; margin-top: 32px;
width: 100%;
} }
.long-container { .long-container {
height: calc(53% - 50px); height: calc(66% - 108px);
} }
.short-container { .short-container {
height: calc(33% - 50px); height: calc(33% - 98px);
} }
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
...@@ -872,4 +817,25 @@ table { ...@@ -872,4 +817,25 @@ table {
.construction-status { .construction-status {
height: 100%; height: 100%;
} }
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
</style> </style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ b8e95357
...@@ -562,7 +562,7 @@ export default { ...@@ -562,7 +562,7 @@ export default {
height: calc(100% - 208px); height: calc(100% - 208px);
.today-warning, .today-warning,
.right-container { .right-container {
width: calc(50% - 10px); width: calc(50% - 6px);
} }
} }
.warp { .warp {
......
src/components/elevator/Index.vue
View file @ b8e95357
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="elevator-container"> <div class="elevator-container">
<ShadowContainer class="long-container"> <ShadowContainerRect class="long-container">
<div id="elevator-detail"> <div id="elevator-detail">
<div class="left-detail"> <div class="left-detail">
<template <template
...@@ -251,7 +251,7 @@ ...@@ -251,7 +251,7 @@
</template> </template>
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainerRect>
</div> </div>
</div> </div>
</template> </template>
...@@ -405,7 +405,7 @@ export default { ...@@ -405,7 +405,7 @@ export default {
height: 100%; height: 100%;
} }
.side-area { .side-area {
width: 350px; width: 400px;
} }
#elevator-description { #elevator-description {
...@@ -461,7 +461,7 @@ export default { ...@@ -461,7 +461,7 @@ export default {
} }
} }
.elevator-container { .elevator-container {
width: calc(100% - 362px); width: calc(100% - 412px);
} }
.platform { .platform {
img { img {
...@@ -507,10 +507,13 @@ export default { ...@@ -507,10 +507,13 @@ export default {
} }
.warning-info-text { .warning-info-text {
white-space: nowrap; white-space: nowrap;
padding-top: 20px; padding-top: 10px;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
line-height: 18px; line-height: 24px;
text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
} }
.warning-info-num { .warning-info-num {
font-size: 24px; font-size: 24px;
...@@ -518,8 +521,8 @@ export default { ...@@ -518,8 +521,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-60px); transform: translateY(-40px);
margin-bottom: -60px; margin-bottom: -40px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
...@@ -575,11 +578,13 @@ export default { ...@@ -575,11 +578,13 @@ export default {
.left-detail, .left-detail,
.right-detail { .right-detail {
width: 30%; width: 30%;
max-width: 360px;
} }
.elevator-tower { .elevator-tower {
width: 40%; width: 40%;
} height: 96%;
.elevator-tower { margin-top: 2%;
text-align: center; text-align: center;
#tower-main { #tower-main {
display: inline-block; display: inline-block;
......
src/components/fallprotection/Index.vue
View file @ b8e95357
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="mid-area"> <div class="mid-area">
<div class="cover-area"></div>
<div class="buildingwindow" v-if="buildingWindowVisible"> <div class="buildingwindow" v-if="buildingWindowVisible">
<div class="building-description"> <div class="building-description">
<img src="@/assets/fallprotection/building.png" alt="" /> <img src="@/assets/fallprotection/building.png" alt="" />
...@@ -425,11 +426,10 @@ export default { ...@@ -425,11 +426,10 @@ export default {
height: calc(100% - 24px); height: calc(100% - 24px);
} }
.side-area { .side-area {
width: 25%; width: 400px;
} }
.mid-area { .mid-area {
width: calc(50% - 40px); width: calc(100% - 824px);
margin: 0 20px;
position: relative; position: relative;
} }
.swagger-container { .swagger-container {
...@@ -561,11 +561,14 @@ export default { ...@@ -561,11 +561,14 @@ export default {
width: 33%; width: 33%;
} }
.warning-info-text { .warning-info-text {
padding-top: 20px; white-space: nowrap;
padding-top: 10px;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
line-height: 18px; line-height: 24px;
white-space: nowrap; text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
} }
.warning-info-num { .warning-info-num {
font-size: 24px; font-size: 24px;
...@@ -573,8 +576,8 @@ export default { ...@@ -573,8 +576,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-60px); transform: translateY(-40px);
margin-bottom: -60px; margin-bottom: -40px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
...@@ -672,4 +675,14 @@ export default { ...@@ -672,4 +675,14 @@ export default {
.short-container { .short-container {
height: calc(50% - 108px); height: calc(50% - 108px);
} }
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style> </style>
\ No newline at end of file
src/components/noise/Index.vue
View file @ b8e95357
...@@ -225,8 +225,8 @@ export default { ...@@ -225,8 +225,8 @@ export default {
}); });
const option = { const option = {
title: { title: {
x: "27%", //X坐标 x: "26%", //X坐标
y: "28%", y: "30%",
text: total, text: total,
subtext: "总数", subtext: "总数",
textAlign: "center", textAlign: "center",
...@@ -322,11 +322,11 @@ export default { ...@@ -322,11 +322,11 @@ export default {
const chart = this.$echarts.init(this.$refs.noiseChart); const chart = this.$echarts.init(this.$refs.noiseChart);
const option = { const option = {
title: { title: {
x: "27%", //X坐标 top: "center", //X坐标
y: "28%", left: "27%",
subtext: "近30日\n噪音情况", text: "近30日\n噪音情况",
textAlign: "center", textAlign: "center",
subtextStyle: { textStyle: {
//副标题样式 //副标题样式
fontSize: 16, fontSize: 16,
fontWeight: "bolder", fontWeight: "bolder",
...@@ -645,7 +645,7 @@ export default { ...@@ -645,7 +645,7 @@ export default {
} }
#aqi-chart { #aqi-chart {
width: 100%; width: 100%;
height: 250px; height: calc(40% - 44px);
} }
.monitor { .monitor {
display: flex; display: flex;
...@@ -859,11 +859,11 @@ export default { ...@@ -859,11 +859,11 @@ export default {
#stats-container { #stats-container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px;
max-width: 840px; max-width: 840px;
border-bottom: 4px solid #114e70; height: 60%;
img { img {
width: 100%; width: 100%;
height: 100%;
vertical-align: top; vertical-align: top;
} }
.text { .text {
...@@ -921,7 +921,8 @@ export default { ...@@ -921,7 +921,8 @@ export default {
.filters { .filters {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; padding-top: 10px;
border-top: 4px solid #114e70;
.filter { .filter {
font-size: 14px; font-size: 14px;
color: rgba(198, 222, 249, 1); color: rgba(198, 222, 249, 1);
......
src/components/projectcheck/Index.vue
View file @ b8e95357
...@@ -630,6 +630,12 @@ export default { ...@@ -630,6 +630,12 @@ export default {
#move-check { #move-check {
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
} }
} }
.chart-container { .chart-container {
......
src/components/realname/Index.vue
View file @ b8e95357
...@@ -129,9 +129,8 @@ ...@@ -129,9 +129,8 @@
<div class="rt-area" id="reset-area1"> <div class="rt-area" id="reset-area1">
<Title type="long" text="一周考勤"></Title> <Title type="long" text="一周考勤"></Title>
<ShadowContainer class="long-container"> <ShadowContainer class="long-container">
<div class="chart-title">近一周考勤</div>
<div id="week-check-chart" ref="weekcheckChart"></div> <div id="week-check-chart" ref="weekcheckChart"></div>
<div class="chart-title">近一周工种考勤</div> <div class="separate-line"></div>
<div id="week-work-chart" ref="weekworkChart"></div> <div id="week-work-chart" ref="weekworkChart"></div>
</ShadowContainer> </ShadowContainer>
<div class="bottom-chart"> <div class="bottom-chart">
...@@ -141,18 +140,28 @@ ...@@ -141,18 +140,28 @@
<div id="in-out-chart" ref="inoutChart"></div> <div id="in-out-chart" ref="inoutChart"></div>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div> <div>
<Title text="工种分布"></Title> <Title text="工种分布"></Title>
<ShadowContainer> <ShadowContainer>
<div class="work-types"> <div class="work-types" id="table-scroll">
<div <div
v-for="(iType, index) in industryTypes" v-for="(iType, index) in industryTypes"
:key="index" :key="index"
class="i-type" class="i-type"
> >
<div class="type-info">
<div class="i-type-name"> <div class="i-type-name">
<img src="@/assets/realname/fl-renyuan.png" alt="" />
{{ iType.name }} {{ iType.name }}
</div> </div>
<div class="i-type-count">
<span>{{ iType.total }}</span>
人
</div>
</div>
<div class="slider"> <div class="slider">
<el-slider <el-slider
:value=" :value="
...@@ -165,10 +174,6 @@ ...@@ -165,10 +174,6 @@
disabled disabled
></el-slider> ></el-slider>
</div> </div>
<div class="i-type-count">
<span>{{ iType.total }}</span>
人
</div>
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
...@@ -321,6 +326,17 @@ export default { ...@@ -321,6 +326,17 @@ export default {
}); });
const chart = this.$echarts.init(this.$refs.weekcheckChart); const chart = this.$echarts.init(this.$refs.weekcheckChart);
const option = { const option = {
title: {
text: "近一周考勤",
left: "center",
textStyle: {
//标题样式
fontSize: 16,
fontWeight: "bolder",
color: "#fff",
textAlign: "center",
},
},
color: "#00FFF0", color: "#00FFF0",
grid: { grid: {
top: 30, top: 30,
...@@ -400,20 +416,75 @@ export default { ...@@ -400,20 +416,75 @@ export default {
const chart = this.$echarts.init(this.$refs.weekworkChart); const chart = this.$echarts.init(this.$refs.weekworkChart);
const option = { const option = {
title: {
text: "近一周工种考勤",
left: "center",
textStyle: {
//标题样式
fontSize: 16,
fontWeight: "bolder",
color: "#fff",
},
},
color: [
"#b5a94a",
"#a83e39",
"#64b95d",
"#f2b486",
"#436db2",
"#fdf193",
"#929292",
"#ec8b88",
"#8db7f9",
"#c783f8",
"#9ffba1",
"#ea6f2d",
"#76ecfc",
"#e638b5",
"#f9e44c",
"#3573f6",
"#9d2df6",
"#efd2d2",
"#7dfa5f",
"#e63223",
"#f2bb7f",
"#93defb",
],
grid: { grid: {
top: 80, top: 80,
bottom: 30, bottom: 20,
left: 30, left: 120,
right: 30, right: 30,
}, },
legend: { legend: {
orient: "horizontal", orient: "vertical",
x: "center", left: "0",
y: "top", top: "0",
icon: "rect",
type: "scroll",
itemWidth: 6,
itemHeight: 6,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "rgba(225, 239, 255, 0.7)", color: "rgba(225, 239, 255, 0.7)",
}, },
pageIcons: {
vertical: [
`path://M210.037 456.406L602.263 104.35A87.354 87.354 0 0 1 660.613 82C708.877 82 748 121.15 748 169.444v704.111a87.476 87.476 0 0 1-22.336 58.39c-32.226 35.95-87.474 38.951-123.4 6.704L210.036 586.593a87.415 87.415 0 0 1-6.7-6.705c-32.227-35.95-29.227-91.235 6.7-123.482z`,
`path://M238.944 129.792l0 764.8c0 17.6 14.4 32 32 32 6.4 0 14.4-1.6 19.232-6.39999999l476.8-369.60000001c20.8-16 24-46.4 8-67.20000001-3.2-3.232-4.8-6.368-8-7.96799999l-476.8-371.264c-14.4-11.2-33.632-7.99999999-44.8 6.4-4.832 4.832-6.432 11.232-6.432 19.232z`,
],
},
pageIconColor: "#3E88FF", //翻页下一页的三角按钮颜色
pageIconInactiveColor: "#333", //翻页（即翻页到头时）
pageIconSize: 14, //翻页按钮大小
pageFormatter: " ", //隐藏翻页的数字
formatter: function (name) {
if (name.length > 4) {
return name.slice(0, 4) + "...";
} else {
return name;
}
},
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -602,8 +673,38 @@ export default { ...@@ -602,8 +673,38 @@ export default {
}) })
.join("+") .join("+")
); );
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
}); });
}, },
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() {
this.getTime(); this.getTime();
...@@ -620,12 +721,12 @@ export default { ...@@ -620,12 +721,12 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 0; padding-bottom: 0;
height: 100%; height: calc(100% - 12px);
.lt-area { .lt-area {
width: 25%; width: 350px;
} }
.mid-area { .mid-area {
width: 25%; width: 510px;
height: 100%; height: 100%;
} }
.lt-area { .lt-area {
...@@ -637,7 +738,7 @@ export default { ...@@ -637,7 +738,7 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
padding: 0px 20px; padding: 0px 20px;
margin-bottom: 12px; margin-bottom: 12px;
height: calc(100% / 6 - 14px); height: calc(100% / 6 - 18px);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -672,7 +773,7 @@ export default { ...@@ -672,7 +773,7 @@ export default {
} }
.rt-area { .rt-area {
width: calc(50% - 24px); width: calc(100% - 884px);
} }
} }
.bottom-chart { .bottom-chart {
...@@ -746,37 +847,46 @@ export default { ...@@ -746,37 +847,46 @@ export default {
} }
#week-check-chart { #week-check-chart {
width: 100%; width: 100%;
height: calc(50% - 35px); height: calc(50% - 10px);
} }
#week-work-chart { #week-work-chart {
width: 100%; width: 100%;
height: calc(50% - 35px); height: calc(50%);
} }
#in-out-chart { #in-out-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.i-type { .i-type {
display: flex;
font-size: 14px; font-size: 14px;
color: #c6def9; color: #c6def9;
padding: 4px; padding: 4px;
.type-info {
display: flex;
justify-content: space-between;
}
.slider { .slider {
width: 70%; width: calc(100% - 12px);
vertical-align: top; vertical-align: top;
margin: 0 6px;
} }
.i-type-name, .i-type-name,
.i-type-count { .i-type-count {
width: 15%;
vertical-align: top; vertical-align: top;
line-height: 42px; white-space: nowrap;
text-align: right;
span { span {
font-size: 16px; font-size: 14px;
}
img {
width: 18px;
vertical-align: top;
} }
} }
.i-type-name { .i-type-name {
padding-right: 12px; padding-right: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }
::v-deep .el-slider__bar { ::v-deep .el-slider__bar {
...@@ -816,4 +926,10 @@ export default { ...@@ -816,4 +926,10 @@ export default {
.short-container { .short-container {
height: calc(32% - 50px); height: calc(32% - 50px);
} }
.separate-line {
width: 100%;
height: 4px;
margin: 8px 0;
background: #114e70;
}
</style> </style>
\ No newline at end of file
src/components/safecap/Index.vue
View file @ b8e95357
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div id="map-area"> <div id="map-area">
<div class="cover-area"></div>
<div class="swagger-container"> <div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" /> <img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" /> <img class="rt" src="@/assets/rt.png" alt="" />
...@@ -419,6 +420,17 @@ export default { ...@@ -419,6 +420,17 @@ export default {
#map-area { #map-area {
width: calc(100% - 412px); width: calc(100% - 412px);
height: 100%; height: 100%;
position: relative;
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
} }
} }
......
src/components/tower/Index.vue
View file @ b8e95357
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div id="mid-area"> <div id="mid-area">
<div class="cover-area"></div>
<div class="towerwindow" v-if="towerWindowVisible"> <div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description"> <div class="tower-description">
<img <img
...@@ -804,7 +805,7 @@ export default { ...@@ -804,7 +805,7 @@ export default {
.step-status { .step-status {
position: absolute; position: absolute;
top: -170%; top: -130%;
color: #18d7b9; color: #18d7b9;
font-size: 12px; font-size: 12px;
} }
...@@ -983,4 +984,14 @@ export default { ...@@ -983,4 +984,14 @@ export default {
.long-container { .long-container {
height: calc(66% - 98px); height: calc(66% - 98px);
} }
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style> </style>
\ No newline at end of file
src/components/unloadingplatform/Index.vue
View file @ b8e95357
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="mid-area"> <div class="mid-area">
<div class="cover-area"></div>
<div class="buildingwindow" v-if="platformWindowVisible"> <div class="buildingwindow" v-if="platformWindowVisible">
<div class="building-description"> <div class="building-description">
<img src="@/assets/unloadingplatform/platform.png" alt="" /> <img src="@/assets/unloadingplatform/platform.png" alt="" />
...@@ -503,11 +504,10 @@ export default { ...@@ -503,11 +504,10 @@ export default {
height: calc(100% - 24px); height: calc(100% - 24px);
} }
.side-area { .side-area {
width: 360px; width: 400px;
} }
.mid-area { .mid-area {
width: calc(100% - 732px); width: calc(100% - 824px);
margin: 0 12px;
position: relative; position: relative;
height: 100%; height: 100%;
} }
...@@ -639,10 +639,13 @@ export default { ...@@ -639,10 +639,13 @@ export default {
} }
.warning-info-text { .warning-info-text {
white-space: nowrap; white-space: nowrap;
padding-top: 20px; padding-top: 10px;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
line-height: 18px; line-height: 24px;
text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
} }
.warning-info-num { .warning-info-num {
font-size: 24px; font-size: 24px;
...@@ -650,8 +653,8 @@ export default { ...@@ -650,8 +653,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-60px); transform: translateY(-40px);
margin-bottom: -60px; margin-bottom: -40px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
...@@ -822,4 +825,14 @@ export default { ...@@ -822,4 +825,14 @@ export default {
.long-container { .long-container {
height: calc(100% - 98px); height: calc(100% - 98px);
} }
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style> </style>
\ No newline at end of file
src/main.js
View file @ b8e95357
...@@ -6,6 +6,8 @@ import 'element-ui/lib/theme-chalk/index.css' ...@@ -6,6 +6,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import 'lib-flexible' import 'lib-flexible'
import Title from "@/components/Title" import Title from "@/components/Title"
import ShadowContainer from "@/components/ShadowContainer" import ShadowContainer from "@/components/ShadowContainer"
import ShadowContainerRect from "@/components/ShadowContainerRect"
import * as echarts from "echarts" import * as echarts from "echarts"
import scroll from 'vue-seamless-scroll' import scroll from 'vue-seamless-scroll'
import "@/assets/iconfont/iconfont.css"; import "@/assets/iconfont/iconfont.css";
...@@ -20,6 +22,8 @@ Vue.config.productionTip = false ...@@ -20,6 +22,8 @@ Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.component('Title', Title) Vue.component('Title', Title)
Vue.component('ShadowContainer', ShadowContainer) Vue.component('ShadowContainer', ShadowContainer)
Vue.component('ShadowContainerRect', ShadowContainerRect)
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router router
......
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