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

中建四局(指挥中心):细节更改

Browse Source
This commit is contained in:
骆乐 2022-10-19 19:17:21 +08:00
parent 2313446a4e
commit 6cff7d5e69
8 changed files with 143 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/projectAdmin/fourEngin/command/center.vue
View File

@ -3,12 +3,13 @@
<div class="image">
<img src="../assets/images/command-center/map.png" />
<!-- 标记点 -->
<div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<!-- @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" -->
<div class="sign" @click="clickBtn">
<!-- <img src="../assets/images/command-center/marker.png" > -->
<div class="sign-item"></div>
</div>
<!-- 信息窗体 -->
<div class="information-form">
<div class="information-form" v-if="open">
<div class="form">
<div class="form-item" style="height: 30px;" v-for="(item, key) in informationForm" :key="key">
<span class="label">{{ item.label }}</span>
@ -33,15 +34,17 @@ export default {
data() {
return {
// 信息窗体开关
open: false,
open: true,
// 信息窗体表单
informationForm: {
projectName: { label: '项目名称:', value: undefined },
bulidStatus: { label: '项目状态:', value: undefined },
constructionStage: { label: '形象进度:', value: undefined },
projectAcreage: { label: '工程面积:', value: undefined, unit: '㎡' },
constructionUnit: { label: '建设单位:', value: undefined },
projectAddress: { label: '项目地址:', value: undefined }
projectName: { label: '项目名称:', value: '中建四局安置房三期工程' },
bulidStatus: { label: '项目状态:', value: '正常施工' },
constructionStage: { label: '形象进度:', value: '主体施工' },
val1:{label: '项目造价:', value: '956.33万元'},
val2:{label: '已完成投资::', value: '956.33万元'},
projectAcreage: { label: '工程面积:', value: '1.53', unit: '㎡' },
constructionUnit: { label: '建设单位:', value: '中建四局发展(广州天河)有限公司'},
projectAddress: { label: '项目地址:', value: '建宁路与热河交叉路口' },
},
// 项目状态枚举
projectStatusEnum: {
@ -72,33 +75,36 @@ export default {
}
},
created() {
this.getList()
// this.getList()
},
methods: {
/** 查询数据 */
getList() {
listProjectInfo({ projectSn: this.$store.state.projectSn }).then(res => {
console.log('项目信息: ', res)
const informationForm = this.informationForm
Object.keys(informationForm).forEach(key => {
// getList() {
// listProjectInfo({ projectSn: this.$store.state.projectSn }).then(res => {
// console.log('项目信息: ', res)
// const informationForm = this.informationForm
// Object.keys(informationForm).forEach(key => {
if (key === 'constructionStage') {
informationForm[key].value = this.constructionStageEnum[res.result[key]]
} else if (key === 'bulidStatus') {
informationForm[key].value = this.projectStatusEnum[res.result[key]]
} else {
informationForm[key].value = res.result[key]
}
})
})
},
// if (key === 'constructionStage') {
// informationForm[key].value = this.constructionStageEnum[res.result[key]]
// } else if (key === 'bulidStatus') {
// informationForm[key].value = this.projectStatusEnum[res.result[key]]
// } else {
// informationForm[key].value = res.result[key]
// }
// })
// })
// },
// 标记点 鼠标移入事件
handleMouseenter() {
this.open = true
},
// 标记点 鼠标移出事件
handleMouseleave() {
this.open = false
// handleMouseenter() {
// this.open = true
// },
// // 标记点 鼠标移出事件
// handleMouseleave() {
// this.open = false
// },
clickBtn(){
this.open = !this.open
}
}
}
@ -224,14 +230,14 @@ export default {
// 信息窗体
.information-form {
display: none;
// display: none;
position: absolute;
right: 33%;
top: 23%;
right: 15%;
top: 35%;
padding: 20px;
width: 300px;
height: 400px;
width: 290px;
height: 275px;
font-size: 14px;
background-color: #44bfc598;
border: 2px solid #89a483;
border-radius: 4px;

113
src/views/projectAdmin/fourEngin/command/leftOne.vue
View File

@ -1,10 +1,10 @@
<template>
<Card title="项目信息">
<div class="container">
<vue-scroll style="height: 100%;">
<vue-scroll style="height: 95%;">
<div class="list">
<div class="list-item" v-for="(item, key) in list" :key="key">
<span class="label">{{ item.label }}</span>
<span class="label">{{ item.label +' : '}} </span>
<span class="value">{{ item.value }}</span>
</div>
</div>
@ -24,31 +24,31 @@ export default {
data: () => ({
// 项目信息列表
list: {
projectAddress: { label: '项目位置', value: undefined },
projectAcreage: { label: '用地面积', value: undefined },
constructionUnit: { label: '建设单位', value: undefined },
designUnit: { label: '设计单位', value: undefined },
exploreUnit: { label: '勘察单位', value: undefined },
supervisorUnit: { label: '监理单位', value: undefined },
projectAddress: { label: '项目位置', value: ' 建宁路与热河交叉路口' },
projectAcreage: { label: '用地面积', value: ' 112768.21㎡' },
constructionUnit: { label: '建设单位', value: ' 中建四局发展(广州天河)有限公司' },
designUnit: { label: '设计单位', value: ' 中国建筑第四工程局有限公司' },
exploreUnit: { label: '勘察单位', value: ' 贵州中建建筑科研设计院有限公司' },
supervisorUnit1: { label: '监理单位', value: ' 广州宏元建设工程咨询有限公司' },
},
}),
created() {
this.getList()
// this.getList()
},
computed: {
...mapState(['projectSn']),
},
methods: {
/** 查询列表 */
getList() {
listProjectInfo({ projectSn: this.projectSn }).then(res => {
console.log('项目信息: ', res);
const list = this.list;
Object.keys(list).forEach(key => {
list[key].value = res.result[key];
})
})
},
// getList() {
// listProjectInfo({ projectSn: this.projectSn }).then(res => {
// console.log('项目信息: ', res);
// const list = this.list;
// Object.keys(list).forEach(key => {
// list[key].value = res.result[key];
// })
// })
// },
},
}
</script>
@ -56,72 +56,67 @@ export default {
<style lang="less" scoped>
.container {
box-sizing: border-box;
padding: 16px;
padding-bottom: 0;
padding-top: 16px;
padding-left: 16px;
width: 100%;
height: 100%;
.list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: #fff;
// overflow-y: scroll;
overflow-y: scroll;
.list-item {
flex: 1;
position: relative;
display: flex;
box-sizing: border-box;
border-left: 4px solid #66d3d8;
margin-bottom: 3px;
padding: 9px 0;
padding: 8px 0;
width: 100%;
background-image: linear-gradient(to right, #3b7589, #182337);
font-size: 14px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
&:hover {
margin-top: 2px;
margin-bottom: 5px;
padding: 20px 0;
&::before {
content: '';
position: absolute;
top: 50%;
left: 6px;
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 {
// margin-top: 2px;
// margin-bottom: 5px;
// padding: 20px 0;
// &::before {
// content: '';
// position: absolute;
// top: 50%;
// left: 6px;
// 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 {
color: #c2805f;
}
// &:hover .value {
// color: #c2805f;
// }
&:last-child {
margin-bottom: 0;
}
// &:last-child {
// margin-bottom: 0;
// }
.label,
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .label,
// .value {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
.label {
box-sizing: border-box;
width: 25%;
width: 22%;
padding-left: 20px;
}

7
src/views/projectAdmin/fourEngin/command/leftThree.vue
View File

@ -110,12 +110,12 @@ export default {
.list-item {
display: flex;
justify-content: space-between;
height: calc(100% / 3.5);
.image {
width: 18px;
margin-right: 20px;
margin-top: 5px;
}
.label {
@ -150,9 +150,8 @@ export default {
}
.unit {
font-size: 18px;
color: #b2b4be;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
}
}
}

2
src/views/projectAdmin/fourEngin/command/rightFour.vue
View File

@ -73,6 +73,7 @@ export default {
}
.max::after{
content: '更多 >';
cursor: pointer;
color: #66D4D9;
position: absolute;
right: 4%;
@ -106,6 +107,7 @@ export default {
}
}
.swiper{
cursor: pointer;
.swiper1{
height: 80%;
width: 96%;

8
src/views/projectAdmin/fourEngin/command/rightOne.vue
View File

@ -7,7 +7,7 @@
<img src="../assets/images/common/echart_orange.gif" alt="">
<div class="value">
<span class="number">{{ pollingData.closeRatio || 0 }}</span>
<span class="unit">%</span>
<!-- <span class="unit">%</span> -->
</div>
</div>
</div>
@ -176,8 +176,8 @@ export default {
}
.label {
font-size: 15px;
color: #a5b2c0;
font-size: 8px;
color: #FFFFFF;
}
.value {
@ -208,7 +208,7 @@ export default {
.top-title {
margin-bottom: 15px;
font-size: 20px;
color: #65b3b5;
color: #66D4D9;
text-align: center;
}

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

@ -41,6 +41,7 @@ export default {
}
.max::after{
content: '更多 >';
cursor: pointer;
color: #66D4D9;
position: absolute;
right: 4%;
@ -80,23 +81,24 @@ export default {
white-space: nowrap;
&:hover {
cursor: pointer;
margin-top: 2px;
margin-bottom: 5px;
padding: 15px 0;
padding-left: 20px;
&::before {
content: '';
position: absolute;
top: 50%;
left: 6px;
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;
}
// padding: 15px 0;
// padding-left: 20px;
// &::before {
// content: '';
// position: absolute;
// top: 50%;
// left: 6px;
// 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;
// }
}
}

38
src/views/projectAdmin/fourEngin/command/rightTwo.vue
View File

@ -4,7 +4,7 @@
<div class="left">
<JNestedRingChart
:title="{
text: '27',
text: '56',
y: '35%',
subTitle: '质量问题数',
color1: '#FFC303',
@ -114,8 +114,8 @@ export default {
color: ["#65d3d8", "#e5612a"],
startAngle: 90,
data: [
{ value: 13, name: "未整改质量问题" },
{ value: 14, name: "已整改质量问题" },
{ value: 28, name: "未整改质量问题" },
{ value: 28, name: "已整改质量问题" },
],
},
],
@ -319,22 +319,22 @@ export default {
white-space: nowrap;
&:hover {
padding: 15px 0;
margin-top: 2px;
margin-bottom: 4px;
&::before {
content: "";
position: absolute;
top: 50%;
left: 6px;
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 0.3s;
}
// padding: 15px 0;
// margin-top: 2px;
// margin-bottom: 4px;
// &::before {
// content: "";
// position: absolute;
// top: 50%;
// left: 6px;
// 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 0.3s;
// }
.value {
color: #c2805f;
}

2
src/views/projectAdmin/fourEngin/components/Card.vue
View File

@ -26,7 +26,7 @@ export default {
height: 34px;
line-height: 25px;
text-align: center;
font-size: 14px;
font-size: 20px;
color: #ffffff;
background-image: url('../assets/images/common/bg-card.png');
background-size: 100% 100%;