admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中建四局(指挥中心): 修复已知问题

Browse Source
This commit is contained in:
Luck-Xiaomi 2022-09-06 11:25:11 +08:00
parent c6270e4f8d
commit ab3a41ae66
11 changed files with 194 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 507 B

BIN
src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 740 B

BIN
src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 B

19
src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
View File

@ -51,11 +51,11 @@
// 当前状态
.active {
background: #6dc6d8;
// background: #6dc6d8;
}
.activeText {
color: #0EAEE9;
// color: #0EAEE9;
}
}
@ -95,6 +95,21 @@
}
}
.steps-item:last-child {
.steps-item-num {
left: 100%;
}
.steps-item-text {
align-items: flex-end;
transform: translateX(5px);
}
.steps-item-line {
background-color: #fff;
}
}
}
</style>

1
src/views/projectAdmin/zjsj/command/center.vue
View File

@ -74,6 +74,7 @@ export default {
width: 50px;
height: 50px;
cursor: pointer;
}
// 信息窗体

99
src/views/projectAdmin/zjsj/command/leftFour.vue
View File

@ -4,18 +4,6 @@
<div class="item" ref="firstChart"></div>
<div class="item" ref="secondChart"></div>
<div class="item" ref="thirdChart"></div>
<div class="first-box box">
<div class="box-title">塔吊设备数</div>
<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>
</template>
@ -31,27 +19,52 @@ export default {
return {}
},
mounted() {
this.initChart('firstChart')
this.initChart('secondChart')
this.initChart('thirdChart')
this.initChart('firstChart', 7, '塔吊设备数', require('../assets/images/command-center/icon-tower.png'))
this.initChart('secondChart', 4, '升降机设备数', require('../assets/images/command-center/icon-lifter.png'))
this.initChart('thirdChart', 5, '视频设备数', require('../assets/images/command-center/icon-video.png'))
},
methods: {
initChart(ref) {
initChart(ref, value, title = '默认标题', image) {
const myChart = echarts.init(this.$refs[ref])
let angle = 0 //角度，用来做简单的动画效果的
let value = 7
let angle = 0 // 角度，用来做简单的动画效果的
const option = {
// backgroundColor: '#061740',
title: {
text: value,
text: '{a|'+ value +'}\n{b|'+ title +'}',
// text: '10\n' + title,
x: 'center',
y: 'center',
top: '35%',
textStyle: {
rich: {
a: {
fontSize: 20,
color: '#e5e442'
},
b: {
fontSize: 13,
color: '#ffffff',
padding: [5, 0]
}
}
}
},
graphic: {
elements: [
{
type: 'image',
style: {
image,
width: 20,
height: 20
},
left: '46%',
top: '59%',
z: 100
}
]
},
series: [
{
@ -329,63 +342,25 @@ export default {
width: 100%;
height: 100%;
white-space: nowrap;
transform: translateY(-20px);
transform: translateY(-15px);
.item {
display: inline-block;
width: calc(100% / 2);
height: 100%;
height: 110%;
color: transparent;
&:nth-child(1) {
transform: translateX(-22%);
transform: translate(-22%, -6%);
}
&:nth-child(2) {
transform: translateX(-48%);
transform: translate(-48%, -6%);
}
&:nth-child(3) {
transform: translateX(-75%);
transform: translate(-75%, -6%);
}
}
.box {
position: absolute;
color: #fff;
text-align: center;
font-size: 12px;
.box-title {
margin-bottom: 3px;
}
.image {
width: 20px;
height: 20px;
}
}
.first-box {
bottom: 30%;
left: 7%;
}
.first-box {
bottom: 30%;
left: 6.5%;
}
.second-box {
bottom: 30%;
left: 42.5%;
}
.third-box {
bottom: 30%;
left: 80.5%;
}
}
</style>

17
src/views/projectAdmin/zjsj/command/leftOne.vue
View File

@ -21,7 +21,7 @@ export default {
{ name: '用地面积', content: '112768.21㎡' },
{ name: '建设单位', content: '中建四局发展(广州天河)有限公司' },
{ name: '设计单位', content: '中国建筑第四工程局有限公司' },
{ name: '勘察单位', content: '贵州中间建筑科研设计院有限公司' },
{ name: '勘察单位', content: '贵州中建建筑科研设计院有限公司' },
{ name: '监理单位', content: '广州宏元建设工程咨询有限公司' },
]
})
@ -40,11 +40,11 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
overflow-y: scroll;
.list-item {
position: relative;
display: flex;
box-sizing: border-box;
border-left: 4px solid #66d3d8;
@ -60,6 +60,19 @@ export default {
&:hover {
padding: 20px 0;
&::before {
content: '';
position: absolute;
top: 50%;
left: 8px;
display: inline-block;
transform: translate(0, -50%);
width: 8px;
height: 14px;
background-image: url('../assets/images/command-center/triangle.png');
background-size: 100% 100%;
transition: all .3s;
}
}
&:hover .value {

19
src/views/projectAdmin/zjsj/command/rightFour.vue
View File

@ -34,6 +34,10 @@ export default {
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
{ name: '中国建筑第四工程局有限公司', content: '' },
]
}
},
@ -84,11 +88,11 @@ export default {
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
overflow-y: scroll;
.list-item {
position: relative;
display: flex;
box-sizing: border-box;
border-left: 4px solid #66d3d8;
@ -104,6 +108,19 @@ export default {
&:hover {
padding: 20px 0;
&::before {
content: '';
position: absolute;
top: 50%;
left: 8px;
display: inline-block;
transform: translate(0, -50%);
width: 6.6px;
height: 11.6px;
background-image: url('../assets/images/command-center/triangle.png');
background-size: 100% 100%;
transition: all .3s;
}
}
&:hover .value {

21
src/views/projectAdmin/zjsj/command/rightOne.vue
View File

@ -4,7 +4,7 @@
<div class="left">
<div class="top">
<div class="image">
<img style="height: 90%" src="../assets/images/command-center/instrument-panel.png" alt="">
<img src="../assets/images/command-center/instrument-panel.png" alt="">
<div class="value">
<span class="number">45</span>
<span class="unit">%</span>
@ -61,6 +61,9 @@ export default {
height: 100%;
.left {
box-sizing: border-box;
padding: 10px 0;
display: flex;
flex-direction: column;
justify-content: space-around;
@ -71,24 +74,36 @@ export default {
.top {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 140px;
.image {
display: grid;
place-items: center;
position: relative;
width: 140px;
width: 100%;
height: 100%;
img {
height: 140px;
}
.value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -16%);
transform: translate(-50%, -50%);
font-size: 23px;
}
}
}
.bottom {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 13px;
}

32
src/views/projectAdmin/zjsj/command/rightThree.vue
View File

@ -3,10 +3,9 @@
<div class="container">
<div class="left list">
<div class="list-item" v-for="(item, key) in leftList" :key="key">
<div
class="label"
:style="{ backgroundColor: item.labelColor, color: item.color, transform: 'rotate(-90deg) translateX(-16px) translateY(-18px)' }"
>{{ item.label }}</div>
<div class="image">
<img :src="item.image">
</div>
<div class="value">
<div class="number">{{ item.value }}</div>
<span class="unit">{{ item.unit }}</span>
@ -47,9 +46,9 @@ export default {
return {
// 左边的列表
leftList: {
'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', labelColor: '#434337', color: '#ffc300' },
PM10: { label: 'PM10', value: 36, unit: 'μg/m³', labelColor: '#3f353d', color: '#f46927' },
噪音: { label: '噪音', value: 13, unit: '%dB', labelColor: '#434c5d', color: '#c6c9ce' }
'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm25.png'), },
PM10: { label: 'PM10', value: 36, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm10.png') },
噪音: { label: '噪音', value: 13, unit: '%dB', image: require('../assets/images/command-center/icon-noise.png') }
},
// 右边的列表
rightList: {
@ -63,8 +62,18 @@ export default {
color: '#f66629',
valueBackgroundImage: require('../assets/images/command-center/block3.png')
},
windDirection: { label: '风向', value: '东南', unit: '风', image: require('../assets/images/command-center/icon-windDirection.png') },
barometricPressure: { label: '大气压', value: 101, unit: 'KPa', image: require('../assets/images/command-center/icon-barometricPressure.png') }
windDirection: {
label: '风向',
value: '东南',
unit: '风',
image: require('../assets/images/command-center/icon-windDirection.png')
},
barometricPressure: {
label: '大气压',
value: 101,
unit: 'KPa',
image: require('../assets/images/command-center/icon-barometricPressure.png')
}
}
}
},
@ -99,6 +108,11 @@ export default {
height: calc(100% / 3.5);
.image {
width: 18px;
margin-right: 20px;
}
.label {
box-sizing: border-box;

88
src/views/projectAdmin/zjsj/command/rightTwo.vue
View File

@ -1,7 +1,7 @@
<template>
<Card title="质量管理">
<div class="container">
<div class="left" ref="chart"></div>
<div class="left" ref="chart" style="transform: translateY(5px)"></div>
<div class="right">
<div class="top">
<div class="left">
@ -38,7 +38,7 @@ export default {
{ name: '钢结构工程', content: '' },
{ name: '建筑装饰工程', content: '' },
{ name: '主体结构', content: '' },
{ name: '建筑电气', content: '' },
{ name: '建筑电气', content: '' }
]
}
},
@ -56,14 +56,14 @@ export default {
},
title: {
text: '质量问题数',
left: '47%',
left: '48%',
top: '55%',
textAlign: 'center',
textStyle: {
fontSize: '15',
fontSize: '13',
color: '#8f929b',
fontWeight: '400'
},
}
},
series: [
{
@ -78,11 +78,11 @@ export default {
},
data: [
{
value: '56',
name: '标题',
value: '14',
name: '未整改质量问题',
itemStyle: {
normal: {
color: '#f25d17'
color: '#60d3d0'
}
},
label: {
@ -92,14 +92,14 @@ export default {
}
},
{
value: 100 - '56',
name: '占位',
value: '13',
name: '已整改质量问题',
tooltip: {
show: false
show: true
},
itemStyle: {
normal: {
color: '#60d3d0'
color: '#f25d17'
}
},
label: {
@ -109,20 +109,46 @@ export default {
fontSize: 36,
color: '#ffc30f',
// 调整label的位置
padding:[-30, 0, 0, 0],
padding: [-30, 0, 0, 0]
}
}
}
}
]
},
// {
// type: 'pie',
// roseType: 'area',
// radius: ['58%', '54%'],
// color: ['#182337', '#68d7d9'],
// data: [50, 50]
// }
{
name: '人员类型',
type: 'pie',
hoverAnimation: false,
legendHoverLink: false,
radius: ['67%', '70%'],
center: ['50%', '50%'],
color: ['#182337', '#60d3d0'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
tooltip: {
show: false
},
data: [
{
value: 50,
name: ''
},
{
value: 50,
name: ''
},
]
}
]
}
@ -142,9 +168,6 @@ export default {
height: 100%;
> .left {
// display: grid;
// place-items: center;
width: 50%;
height: 100%;
}
@ -171,16 +194,16 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
overflow-y: scroll;
.list-item {
position: relative;
display: flex;
box-sizing: border-box;
border-left: 4px solid #66d3d8;
margin-bottom: 5px;
padding: 6px 0;
padding: 5px 0;
width: 100%;
background-image: linear-gradient(to right, #3b7589, #212c3e);
font-size: 12px;
@ -190,7 +213,20 @@ export default {
white-space: nowrap;
&:hover {
padding: 20px 0;
padding: 10px 0;
&::before {
content: '';
position: absolute;
top: 50%;
left: 8px;
display: inline-block;
transform: translate(0, -50%);
width: 6.6px;
height: 11.6px;
background-image: url('../assets/images/command-center/triangle.png');
background-size: 100% 100%;
transition: all .3s;
}
}
&:hover .value {