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

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

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

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

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

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

@ -73,6 +73,7 @@ export default {
} }
.max::after{ .max::after{
content: '更多 >'; content: '更多 >';
cursor: pointer;
color: #66D4D9; color: #66D4D9;
position: absolute; position: absolute;
right: 4%; right: 4%;
@ -106,6 +107,7 @@ export default {
} }
} }
.swiper{ .swiper{
cursor: pointer;
.swiper1{ .swiper1{
height: 80%; height: 80%;
width: 96%; 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=""> <img src="../assets/images/common/echart_orange.gif" alt="">
<div class="value"> <div class="value">
<span class="number">{{ pollingData.closeRatio || 0 }}</span> <span class="number">{{ pollingData.closeRatio || 0 }}</span>
<span class="unit">%</span> <!-- <span class="unit">%</span> -->
</div> </div>
</div> </div>
</div> </div>
@ -176,8 +176,8 @@ export default {
} }
.label { .label {
font-size: 15px; font-size: 8px;
color: #a5b2c0; color: #FFFFFF;
} }
.value { .value {
@ -208,7 +208,7 @@ export default {
.top-title { .top-title {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 20px; font-size: 20px;
color: #65b3b5; color: #66D4D9;
text-align: center; text-align: center;
} }

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

@ -41,6 +41,7 @@ export default {
} }
.max::after{ .max::after{
content: '更多 >'; content: '更多 >';
cursor: pointer;
color: #66D4D9; color: #66D4D9;
position: absolute; position: absolute;
right: 4%; right: 4%;
@ -80,23 +81,24 @@ export default {
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
cursor: pointer;
margin-top: 2px; margin-top: 2px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 15px 0; // padding: 15px 0;
padding-left: 20px; // padding-left: 20px;
&::before { // &::before {
content: ''; // content: '';
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 6px; // left: 6px;
display: inline-block; // display: inline-block;
transform: translate(0, -50%); // transform: translate(0, -50%);
width: 8px; // width: 8px;
height: 14px; // height: 14px;
background-image: url('../assets/images/command-center/triangle.png'); // background-image: url('../assets/images/command-center/triangle.png');
background-size: 100% 100%; // background-size: 100% 100%;
transition: all .3s; // transition: all .3s;
} // }
} }
} }

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

@ -4,7 +4,7 @@
<div class="left"> <div class="left">
<JNestedRingChart <JNestedRingChart
:title="{ :title="{
text: '27', text: '56',
y: '35%', y: '35%',
subTitle: '质量问题数', subTitle: '质量问题数',
color1: '#FFC303', color1: '#FFC303',
@ -114,8 +114,8 @@ export default {
color: ["#65d3d8", "#e5612a"], color: ["#65d3d8", "#e5612a"],
startAngle: 90, startAngle: 90,
data: [ data: [
{ value: 13, name: "未整改质量问题" }, { value: 28, name: "未整改质量问题" },
{ value: 14, name: "已整改质量问题" }, { value: 28, name: "已整改质量问题" },
], ],
}, },
], ],
@ -319,22 +319,22 @@ export default {
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
padding: 15px 0; // padding: 15px 0;
margin-top: 2px; // margin-top: 2px;
margin-bottom: 4px; // margin-bottom: 4px;
&::before { // &::before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 6px; // left: 6px;
display: inline-block; // display: inline-block;
transform: translate(0, -50%); // transform: translate(0, -50%);
width: 6.6px; // width: 6.6px;
height: 11.6px; // height: 11.6px;
background-image: url("../assets/images/command-center/triangle.png"); // background-image: url("../assets/images/command-center/triangle.png");
background-size: 100% 100%; // background-size: 100% 100%;
transition: all 0.3s; // transition: all 0.3s;
} // }
.value { .value {
color: #c2805f; color: #c2805f;
} }

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

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