中建四局(设备管理)、中建四局(安全管理)、中建四局 (质量管理): 完成的布局和样式
中建四局(智慧中心): 完成地图部分的布局和样式
This commit is contained in:
Luck-Xiaomi
parent
cce0b81dc3
commit
f47bfbb9e2
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
Binary file not shown.
|
After Width: | Height: | Size: 1017 B |
Binary file not shown.
|
After Width: | Height: | Size: 865 B |
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/views/projectAdmin/zjsj/assets/images/command-center/map.png
Normal file
BIN
src/views/projectAdmin/zjsj/assets/images/command-center/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 573 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 895 B |
Binary file not shown.
|
After Width: | Height: | Size: 197 B |
@ -1,18 +1,116 @@
|
||||
<template>
|
||||
<div class="contentBox">
|
||||
<div class="container">
|
||||
<div class="image">
|
||||
<img src="../assets/images/command-center/map.png" alt="">
|
||||
<!-- 标记点 -->
|
||||
<div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"></div>
|
||||
<!-- 信息窗体 -->
|
||||
<div v-show="open" class="information-form">
|
||||
<div class="form">
|
||||
<div class="form-item" style="height: 30px;" v-for="(item, key) in informationForm" :key="key">
|
||||
<span class="label">{{ item.label }}</span>
|
||||
<div class="bottom">
|
||||
<span class="value" :style="{ fontStyle: item.unit ? 'italic' : '' }">{{ item.value }}</span>
|
||||
<span v-if="item.value" class="unit">{{ item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
// 信息窗体开关
|
||||
open: false,
|
||||
// 信息窗体表单
|
||||
informationForm: {
|
||||
projectName: { label: '项目名称:', value: '中建四局安置房三期工程' },
|
||||
projectStatus: { label: '项目状态:', value: '正常施工' },
|
||||
schedule: { label: '形象进度:', value: '主体施工' },
|
||||
costOfProjects: { label: '项目造价:', value: 956.33, unit: '万元' },
|
||||
completedInvestment: { label: '已完成投资:', value: 956.33, unit: '万元' },
|
||||
area: { label: '工程面积:', value: 15300, unit: '㎡' },
|
||||
developmentOrganization: { label: '建设单位:', value: '中建四局发展(广州天河)有限公司' },
|
||||
projectAddress: { label: '项目地址:', value: '建宁路与热河交叉路口' },
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 标记点 鼠标移入事件
|
||||
handleMouseenter() {
|
||||
this.open = true;
|
||||
},
|
||||
// 标记点 鼠标移出事件
|
||||
handleMouseleave() {
|
||||
this.open = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contentBox{
|
||||
width: 50%;
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 标记点
|
||||
.sign {
|
||||
position: absolute;
|
||||
right: 25.8%;
|
||||
top: 33%;
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
// 信息窗体
|
||||
.information-form {
|
||||
position: absolute;
|
||||
right: 33%;
|
||||
top: 23%;
|
||||
|
||||
padding: 20px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
background-color: #44bfc598;
|
||||
border: 2px solid #89a483;
|
||||
border-radius: 4px;
|
||||
transition: all .3s;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
font-weight: bold;
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
color: #002636;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -15,17 +15,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerBox">
|
||||
<div class="centerTop">
|
||||
<div class="center">
|
||||
<Center />
|
||||
</div>
|
||||
<div class="centerBot">
|
||||
<div class="one">
|
||||
<CenterBOne />
|
||||
</div>
|
||||
<div class="two">
|
||||
<CenterBTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<div class="rightOne">
|
||||
@ -100,19 +92,8 @@ export default {
|
||||
width: 50%;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
.centerTop {
|
||||
height: 78%;
|
||||
background-color: #11a0a6;
|
||||
}
|
||||
.centerBot {
|
||||
margin-top: 2%;
|
||||
display: flex;
|
||||
.one {
|
||||
width: 100%;
|
||||
}
|
||||
.two {
|
||||
width: 100%;
|
||||
}
|
||||
.center {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.rightBox {
|
||||
|
||||
@ -6,7 +6,15 @@
|
||||
<div class="item" ref="thirdChart"></div>
|
||||
<div class="first-box box">
|
||||
<div class="box-title">塔吊设备数</div>
|
||||
<img class="image" src="" alt="">
|
||||
<img class="image" src="../assets/images/command-center/icon-tower.png" alt="">
|
||||
</div>
|
||||
<div class="second-box box">
|
||||
<div class="box-title">升降机设备数</div>
|
||||
<img class="image" src="../assets/images/command-center/icon-lifter.png" alt="">
|
||||
</div>
|
||||
<div class="third-box box">
|
||||
<div class="box-title">视频设备数</div>
|
||||
<img class="image" src="../assets/images/command-center/icon-video.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -331,11 +339,11 @@ export default {
|
||||
color: transparent;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translateX(-20%);
|
||||
transform: translateX(-22%);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: translateX(-47%);
|
||||
transform: translateX(-48%);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
@ -356,13 +364,27 @@ export default {
|
||||
.image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.first-box {
|
||||
bottom: 30%;
|
||||
left: 8%;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.first-box {
|
||||
bottom: 30%;
|
||||
left: 6.5%;
|
||||
}
|
||||
|
||||
.second-box {
|
||||
bottom: 30%;
|
||||
left: 42.5%;
|
||||
}
|
||||
|
||||
.third-box {
|
||||
bottom: 30%;
|
||||
left: 80.5%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,9 +26,9 @@ export default {
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
],
|
||||
}),
|
||||
{ name: '项目位置', content: '测试测试测试测试' }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -40,27 +40,30 @@ export default {
|
||||
height: 100%;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-left: 4px solid #66d3d8;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 30px;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right , #3b7589, #212c3e);
|
||||
font-size: 13px;
|
||||
background-image: linear-gradient(to right, #3b7589, #212c3e);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
padding: 30px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&:hover .value {
|
||||
@ -71,8 +74,21 @@ export default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label,
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 30px;
|
||||
box-sizing: border-box;
|
||||
width: 25%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card title="安全管理">
|
||||
<div class="contentBox">
|
||||
123
|
||||
<Card title="安全管理">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<div class="image">
|
||||
<img style="width: 100%" src="../assets/images/command-center/instrument-panel.png" alt="">
|
||||
<div class="value">
|
||||
<span class="number">45</span>
|
||||
<span class="unit">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="label">巡检总数/已完成整改</span>
|
||||
<div class="value">
|
||||
<span class="number">200</span>/<span class="number">45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="content">
|
||||
<div class="top-title">安全生产天数</div>
|
||||
|
||||
<div class="days">
|
||||
<div class="number item">0</div>
|
||||
<div class="number item">3</div>
|
||||
<div class="number item">6</div>
|
||||
<div class="number item">5</div>
|
||||
<div class="text item">天</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<span class="label">安全生产起始日期：</span>
|
||||
<div class="value">
|
||||
<span>2019</span>年
|
||||
<span>03</span>月
|
||||
<span>15</span>日
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -18,4 +54,114 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.image {
|
||||
position: relative;
|
||||
width: 175px;
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 15px;
|
||||
color: #a5b2c0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
.number:nth-child(1) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.number:nth-child(2) {
|
||||
color: #af5320;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 16px 6px 8px;
|
||||
width: 175px;
|
||||
height: 152px;
|
||||
background-image: url('../assets/images/command-center/max-block.png');
|
||||
|
||||
.top-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
color: #65b3b5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
.item {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 64px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
&.number {
|
||||
background-image: url('../assets/images/command-center/block.png');
|
||||
}
|
||||
&.text {
|
||||
width: 28px !important;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
color: #a5b2c0;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
transform: scale(65%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card title="质量管理">
|
||||
<div class="contentBox">
|
||||
123
|
||||
<Card title="质量管理">
|
||||
<div class="container">
|
||||
<div class="left" ref="chart"></div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<span class="label">已整改质量问题</span>
|
||||
<span class="value">(13)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="label">未整改质量问题</span>
|
||||
<span class="value">(14)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-item" v-for="(item, index) in list" :key="index">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<span class="value">{{ item.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card'
|
||||
|
||||
import echarts from 'echarts4'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
list: [
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '1测试测试测试测试' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const myChart = echarts.init(this.$refs.chart)
|
||||
|
||||
const option = {
|
||||
backgroundColor: '#182337',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
title: {
|
||||
text: '质量问题数',
|
||||
left: '47%',
|
||||
top: '55%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#8f929b',
|
||||
fontWeight: '400'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['80', '68'],
|
||||
center: ['50%', '50%'],
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: '56',
|
||||
name: '标题',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f25d17'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - '56',
|
||||
name: '占位',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#60d3d0'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '56',
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: '#ffc30f',
|
||||
// 调整label的位置
|
||||
padding:[-30, 0, 0, 0],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// type: 'pie',
|
||||
// roseType: 'area',
|
||||
// radius: ['58%', '54%'],
|
||||
// color: ['#182337', '#68d7d9'],
|
||||
// data: [50, 50]
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> .left {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> .right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
line-height: 34px;
|
||||
.left {
|
||||
color: #af5320;
|
||||
transform: translateX(-10%);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-left: 4px solid #66d3d8;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #3b7589, #212c3e);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&:hover .value {
|
||||
color: #c2805f;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label,
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.label {
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user