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-14 17:30:03 +08:00
parent 92abfbc131
commit 661c4f34c7
9 changed files with 299 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/js/api/zhongjianFourth.js Normal file
View File

@ -0,0 +1,14 @@
/* 中建四局 */
import { post, get } from '../http'
/* --------------指挥中心------------ */
// 项目信息
export const listProjectInfo = data => post('xmgl/project/getProjectInfoBySn', data);
// 安全管理
export const resourceManagement = params => get('xmgl/hiddenDangerInspectRecord/getPollingFinishDays', params);
// 质量管理-整改问题
export const qualityManagement = params => get('xmgl/qualityInspectionRecord/getRectificationAndNoNum', params);
// 质量管理-质量问题库
export const listQualityManagement = params => get('xmgl/dangerTypeRecord/getBigList', params);

30
src/views/projectAdmin/zjsj/command/LeftThree/Process.vue
View File

@ -1,16 +1,14 @@
<!-- 步骤条 --> <!-- 步骤条 -->
<template> <template>
<!-- <vue-scroll style="height: 100%"> --> <div class="list progress">
<div class="list progress"> <div class="list-item progress-item" v-for="(item, index) in list" :key="index">
<div class="list-item progress-item" v-for="(item, index) in list" :key="index"> <div :class="['progress-item-dot', { active: item.active }]"></div>
<div :class="['progress-item-dot', { active: item.active }]"></div> <div class="info">
<div class="info"> <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> </div>
<!-- </vue-scroll> --> </div>
</template> </template>
<script> <script>
@ -38,22 +36,22 @@ export default {
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 150px; width: 190px;
color: #fff; color: #fff;
.progress-item-dot { .progress-item-dot {
width: 8px; width: 10px;
height: 8px; height: 10px;
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 50%;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 3px; top: 4px;
transform: translateX(-99%); transform: translateX(-99%);
display: block; display: block;
width: 150px; width: 190px;
height: 2px; height: 2px;
background: #fff; background: #fff;
} }
@ -69,8 +67,8 @@ export default {
position: relative; position: relative;
z-index: 9; z-index: 9;
display: block; display: block;
width: 8px; width: 10px;
height: 8px; height: 10px;
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 50%;
} }

2
src/views/projectAdmin/zjsj/command/LeftThree/index.vue
View File

@ -26,7 +26,7 @@ export default {
}, },
mounted() { mounted() {
const progress = this.$refs.Process; const progress = this.$refs.Process;
progress.scrollLeft = 30; progress.scrollLeft = 48;
}, },
} }
</script> </script>

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

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<div class="image"> <div class="image">
<img src="../assets/images/command-center/map.png" alt=""> <img src="../assets/images/command-center/map.png" alt />
<!-- 标记点 --> <!-- 标记点 -->
<div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"></div> <div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"></div>
<!-- 信息窗体 --> <!-- 信息窗体 -->
@ -21,6 +21,8 @@
</template> </template>
<script> <script>
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'
export default { export default {
data() { data() {
return { return {
@ -28,28 +30,72 @@ export default {
open: false, open: false,
// 信息窗体表单 // 信息窗体表单
informationForm: { informationForm: {
projectName: { label: '项目名称:', value: '中建四局安置房三期工程' }, projectName: { label: '项目名称:', value: undefined },
projectStatus: { label: '项目状态:', value: '正常施工' }, bulidStatus: { label: '项目状态:', value: undefined },
schedule: { label: '形象进度:', value: '主体施工' }, constructionStage: { label: '形象进度:', value: undefined },
costOfProjects: { label: '项目造价:', value: 956.33, unit: '万元' }, projectAcreage: { label: '工程面积:', value: undefined, unit: '㎡' },
completedInvestment: { label: '已完成投资:', value: 956.33, unit: '万元' }, constructionUnit: { label: '建设单位:', value: undefined },
area: { label: '工程面积:', value: 15300, unit: '㎡' }, projectAddress: { label: '项目地址:', value: undefined }
developmentOrganization: { label: '建设单位:', value: '中建四局发展(广州天河)有限公司' },
projectAddress: { label: '项目地址:', value: '建宁路与热河交叉路口' },
}, },
}; // 项目状态枚举
projectStatusEnum: {
0: '未开工',
1: '在建',
2: '停工',
3: '验收',
4: '完工'
},
// 形象进度枚举
constructionStageEnum: {
1: '施工证获取',
2: '土方开挖',
3: '桩基',
4: '支护开始',
5: '垫层完成',
6: '正负零',
7: '工程达到预售条件',
8: '主体施工',
9: '主体封顶',
10: '装饰装修',
11: '景观园林',
12: '主体交付',
13: '预售证获取',
14: '规划验收',
15: '竣工备案完成'
}
}
},
created() {
this.getList()
}, },
methods: { methods: {
/** 查询数据 */
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]
}
})
})
},
// 标记点 鼠标移入事件 // 标记点 鼠标移入事件
handleMouseenter() { handleMouseenter() {
this.open = true; this.open = true
}, },
// 标记点 鼠标移出事件 // 标记点 鼠标移出事件
handleMouseleave() { handleMouseleave() {
this.open = false; this.open = false
}, }
}, }
}; }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -89,7 +135,7 @@ export default {
background-color: #44bfc598; background-color: #44bfc598;
border: 2px solid #89a483; border: 2px solid #89a483;
border-radius: 4px; border-radius: 4px;
transition: all .3s; transition: all 0.3s;
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -111,7 +157,6 @@ export default {
} }
} }
} }
} }
} }
} }

15
src/views/projectAdmin/zjsj/command/index.vue
View File

@ -74,7 +74,6 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: url(../assets/temp/1.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.leftBox { .leftBox {
width: 25%; width: 25%;
@ -93,27 +92,29 @@ export default {
} }
.centerBox { .centerBox {
width: 50%; width: 50%;
margin-left: 2%;
margin-right: 2%;
.center { .center {
height: 100%; height: 100%;
} }
} }
.rightBox { .rightBox {
width: 25%; width: 25%;
height: 100%; height: 100%;
.rightOne { .rightOne {
height: 28%; height: 26%;
} }
.rightTwo { .rightTwo {
height: 22%; height: 30%;
} }
.rightThree, .rightThree {
.rightFour {
height: 25%; height: 25%;
} }
.rightFour {
height: 19%;
}
} }
} }
</style> </style>

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

@ -3,9 +3,9 @@
<div class="container"> <div class="container">
<vue-scroll style="height: 100%;"> <vue-scroll style="height: 100%;">
<div class="list"> <div class="list">
<div class="list-item" v-for="(item, index) in list" :key="index"> <div class="list-item" v-for="(item, key) in list" :key="key">
<span class="label">{{ item.name }}</span> <span class="label">{{ item.label }}</span>
<span class="value">{{ item.content }}</span> <span class="value">{{ item.value }}</span>
</div> </div>
</div> </div>
</vue-scroll> </vue-scroll>
@ -15,18 +15,41 @@
<script> <script>
import Card from '../components/Card' import Card from '../components/Card'
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'
import { mapState } from 'vuex'
export default { export default {
components: { Card }, components: { Card },
data: () => ({ data: () => ({
list: [ // 项目信息列表
{ name: '项目位置', content: '建宁路与热河交叉路口' }, list: {
{ name: '用地面积', content: '112768.21㎡' }, projectAddress: { label: '项目位置', value: undefined },
{ name: '建设单位', content: '中建四局发展(广州天河)有限公司' }, projectAcreage: { label: '用地面积', value: undefined },
{ name: '设计单位', content: '中国建筑第四工程局有限公司' }, constructionUnit: { label: '建设单位', value: undefined },
{ name: '勘察单位', content: '贵州中建建筑科研设计院有限公司' }, designUnit: { label: '设计单位', value: undefined },
{ name: '监理单位', content: '广州宏元建设工程咨询有限公司' }, exploreUnit: { label: '勘察单位', value: undefined },
] supervisorUnit: { label: '监理单位', value: undefined },
}) },
}),
created() {
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];
})
})
},
},
} }
</script> </script>
@ -34,6 +57,7 @@ export default {
.container { .container {
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
padding-bottom: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -43,17 +67,18 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
// overflow-y: scroll; overflow-y: scroll;
.list-item { .list-item {
flex: 1;
position: relative; position: relative;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
border-left: 4px solid #66d3d8; border-left: 4px solid #66d3d8;
margin-bottom: 5px; margin-bottom: 3px;
padding: 10px 0; padding: 9px 0;
width: 100%; width: 100%;
background-image: linear-gradient(to right, #3b7589, #212c3e); background-image: linear-gradient(to right, #3b7589, #182337);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -61,12 +86,14 @@ export default {
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
margin-top: 2px;
margin-bottom: 5px;
padding: 20px 0; padding: 20px 0;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 8px; left: 6px;
display: inline-block; display: inline-block;
transform: translate(0, -50%); transform: translate(0, -50%);
width: 8px; width: 8px;

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

@ -99,9 +99,9 @@ export default {
box-sizing: border-box; box-sizing: border-box;
border-left: 4px solid #66d3d8; border-left: 4px solid #66d3d8;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px 0; padding: 8px 0;
width: 100%; width: 100%;
background-image: linear-gradient(to right, #3b7589, #212c3e); background-image: linear-gradient(to right, #3b7589, #182337);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;

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

@ -6,15 +6,15 @@
<div class="image"> <div class="image">
<img src="../assets/images/command-center/instrument-panel.png" alt=""> <img src="../assets/images/command-center/instrument-panel.png" alt="">
<div class="value"> <div class="value">
<span class="number">45</span> <span class="number">{{ pollingData.closeRatio || 0 }}</span>
<span class="unit">%</span> <span class="unit">%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
<span class="label">巡检总数/已完成整改</span> <span class="label">已完成整改/巡检总数</span>
<div class="value"> <div class="value">
<span class="number">200</span>/<span class="number">45</span> <span class="number">{{ pollingData.rectificationNum }}</span>/<span class="number">{{ pollingData.totalNum }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -23,19 +23,19 @@
<div class="top-title">安全生产天数</div> <div class="top-title">安全生产天数</div>
<div class="days"> <div class="days">
<div class="number item">0</div> <div class="number item">{{ days.kilobit }}</div>
<div class="number item">3</div> <div class="number item">{{ days.hundreds }}</div>
<div class="number item">6</div> <div class="number item">{{ days.decade }}</div>
<div class="number item">5</div> <div class="number item">{{ days.units }}</div>
<div class="text item">天</div> <div class="text item">天</div>
</div> </div>
<div class="bottom"> <div class="bottom">
<span class="label">起始日期：</span> <span class="label">起始日期：</span>
<div class="value"> <div class="value">
<span>2019</span>年 <span>{{ startDate.year }} </span>年
<span>03</span>月 <span>{{ startDate.month }} </span>月
<span>15</span>日 <span>{{ startDate.day }} </span>日
</div> </div>
</div> </div>
</div> </div>
@ -46,11 +46,73 @@
<script> <script>
import Card from '../components/Card' import Card from '../components/Card'
import { resourceManagement } from '@/assets/js/api/zhongjianFourth'
import { mapState } from 'vuex'
export default { export default {
components: { Card }, components: { Card },
data() { data() {
return {} return {
} // 巡检数据
pollingData: {
rectificationNum: undefined, // 完成整改数
totalNum: undefined, // 巡检总数
closeRatio: undefined, // 占比
days: undefined, // 安全生产天数
startWorkDate: undefined, // 起始日期
},
// 天数
days : {
units: undefined,
decade: undefined,
hundreds: undefined,
kilobit: undefined,
},
// 起始日期
startDate: {
year: undefined,
month: undefined,
day: undefined,
},
}
},
created() {
this.getList()
},
computed: {
...mapState(['projectSn']),
},
methods: {
/** 查询列表 */
getList() {
resourceManagement({ projectSn: this.projectSn }).then(res => {
console.log('安全管理: ', res);
const pollingData = this.pollingData;
Object.keys(pollingData).forEach(key => {
pollingData[key] = res.result[key]
})
pollingData.days = pollingData.days.toString()
if (pollingData.days.length < 4) {
pollingData.days = pollingData.days.padStart(4, 0)
const days = this.days;
days.units = pollingData.days[3];
days.decade = pollingData.days[2];
days.hundreds = pollingData.days[1];
days.kilobit = pollingData.days[0];
}
const startDate = pollingData.startWorkDate.split('-');
console.log('startDate: ', startDate);
this.startDate.year = startDate[0]
this.startDate.month = startDate[1]
this.startDate.day = startDate[2]
})
},
},
} }
</script> </script>
@ -78,7 +140,7 @@ export default {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 140px; height: 150px;
.image { .image {
display: grid; display: grid;
@ -87,7 +149,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
img { img {
height: 140px; height: 150px;
} }
.value { .value {
position: absolute; position: absolute;
@ -105,6 +167,14 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 13px; font-size: 13px;
.number:nth-child(1) {
color: #af5320;
}
.number:nth-child(2) {
color: #fff;
}
} }
.label { .label {
@ -116,14 +186,6 @@ export default {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
.number:nth-child(1) {
color: #fff;
}
.number:nth-child(2) {
color: #af5320;
}
} }
} }

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

@ -6,20 +6,24 @@
<div class="top"> <div class="top">
<div class="left"> <div class="left">
<span class="label">已整改质量问题</span> <span class="label">已整改质量问题</span>
<span class="value">(13)</span> <span class="value">({{ qualityProblem.rectificationNum || 0 }})</span>
</div> </div>
<div class="right"> <div class="right">
<span class="label">未整改质量问题</span> <span class="label">未整改质量问题</span>
<span class="value">(14)</span> <span class="value">({{ qualityProblem.noRectificationNum || 0 }})</span>
</div> </div>
</div> </div>
<vue-scroll> <vue-scroll style="flex: 1;position: relative;">
<div class="list"> <div class="list" v-if="list.length">
<div class="list-item" v-for="(item, index) in list" :key="index"> <div class="list-item" v-for="(item, index) in list" :key="index">
<span class="label">{{ item.name }}</span> <span class="label">{{ item.dangerName }}</span>
<span class="value">{{ item.content }}</span> <!-- <span class="value">{{ item.content }}</span> -->
</div> </div>
</div> </div>
<div v-else class="empty" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
<img src="@/assets/images/noData3.png">
<div style="text-align: center;color: #5b626b;">暂无数据</div>
</div>
</vue-scroll> </vue-scroll>
</div> </div>
</div> </div>
@ -30,24 +34,60 @@
import Card from '../components/Card' import Card from '../components/Card'
import echarts from 'echarts4' import echarts from 'echarts4'
import { qualityManagement, listQualityManagement } from '@/assets/js/api/zhongjianFourth'
import { mapState } from 'vuex'
export default { export default {
components: { Card }, components: { Card },
data() { data() {
return { return {
list: [ // 质量问题
{ name: '防水', content: '' }, qualityProblem: {
{ name: '门窗', content: '' }, rectificationNum: undefined, // 整改数量
{ name: '钢结构工程', content: '' }, noRectificationNum: undefined, // 未整改数量
{ name: '建筑装饰工程', content: '' }, totalNum: undefined, // 总数量
{ name: '主体结构', content: '' }, },
{ name: '建筑电气', content: '' } list: []
]
} }
}, },
created() {
this.getQualityProblem()
this.getList()
},
computed: {
...mapState(['projectSn']),
},
mounted() { mounted() {
this.initChart() this.initChart()
}, },
methods: { methods: {
/** 查询列表 */
getQualityProblem() {
qualityManagement({ projectSn: this.projectSn }).then(res => {
console.log('质量管理: ', res);
const qualityProblem = this.qualityProblem;
Object.keys(qualityProblem).forEach(key => {
qualityProblem[key] = toString(res.result[key]);
})
this.initChart()
function toString(value) {
if (typeof value === 'string') return value
return value.toString()
}
})
},
/** */
getList() {
listQualityManagement({ projectSn: this.projectSn }).then(res => {
console.log('质量问题库: ', res);
this.list = res.result;
})
},
/** 初始化chart */
initChart() { initChart() {
const myChart = echarts.init(this.$refs.chart) const myChart = echarts.init(this.$refs.chart)
@ -70,7 +110,7 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['76%', '88%'], radius: ['60%', '53%'],
center: ['50%', '50%'], center: ['50%', '50%'],
hoverAnimation: false, hoverAnimation: false,
label: { label: {
@ -80,7 +120,7 @@ export default {
}, },
data: [ data: [
{ {
value: '14', value: this.qualityProblem.noRectificationNum || '0',
name: '未整改质量问题', name: '未整改质量问题',
itemStyle: { itemStyle: {
normal: { normal: {
@ -94,7 +134,7 @@ export default {
} }
}, },
{ {
value: '13', value: this.qualityProblem.rectificationNum || '0',
name: '已整改质量问题', name: '已整改质量问题',
tooltip: { tooltip: {
show: true show: true
@ -106,7 +146,7 @@ export default {
}, },
label: { label: {
normal: { normal: {
formatter: '56', formatter: this.qualityProblem.totalNum || '56', // 中间的数值
textStyle: { textStyle: {
fontSize: 36, fontSize: 36,
color: '#ffc30f', color: '#ffc30f',
@ -123,7 +163,7 @@ export default {
type: 'pie', type: 'pie',
hoverAnimation: false, hoverAnimation: false,
legendHoverLink: false, legendHoverLink: false,
radius: ['67%', '70%'], radius: ['47%', '45%'],
center: ['50%', '50%'], center: ['50%', '50%'],
color: ['#182337', '#60d3d0'], color: ['#182337', '#60d3d0'],
label: { label: {
@ -164,7 +204,7 @@ export default {
.container { .container {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 5px; padding: 10px 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -184,7 +224,7 @@ export default {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
line-height: 34px; line-height: 25px;
.left { .left {
color: #af5320; color: #af5320;
transform: translateX(-10%); transform: translateX(-10%);
@ -193,7 +233,7 @@ export default {
.list { .list {
width: 100%; width: 100%;
flex: 1; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
@ -204,10 +244,10 @@ export default {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
border-left: 4px solid #66d3d8; border-left: 4px solid #66d3d8;
margin-bottom: 5px; margin-bottom: 2px;
padding: 7px 0; padding: 6px 0;
width: 100%; width: 100%;
background-image: linear-gradient(to right, #3b7589, #212c3e); background-image: linear-gradient(to right, #3b7589, #182337);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -216,11 +256,13 @@ export default {
&:hover { &:hover {
padding: 15px 0; padding: 15px 0;
margin-top: 2px;
margin-bottom: 4px;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 8px; left: 6px;
display: inline-block; display: inline-block;
transform: translate(0, -50%); transform: translate(0, -50%);
width: 6.6px; width: 6.6px;
@ -232,6 +274,7 @@ export default {
.value { .value {
color: #c2805f; color: #c2805f;
} }
} }
&:last-child { &:last-child {
@ -243,6 +286,7 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
transform: translateX(-5%) scale(90%);
} }
.label { .label {