中建四局-指挥中心：完成项目信息、安全管理、质量管理、地图部分接口的联调
This commit is contained in:
Luck-Xiaomi
parent
92abfbc131
commit
661c4f34c7
14
src/assets/js/api/zhongjianFourth.js
Normal file
14
src/assets/js/api/zhongjianFourth.js
Normal 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);
|
||||
|
||||
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
<!-- 步骤条 -->
|
||||
<template>
|
||||
<!-- <vue-scroll style="height: 100%"> -->
|
||||
<div class="list progress">
|
||||
<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="info">
|
||||
<span class="label">{{ item.label }}</span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</div>
|
||||
<div class="list progress">
|
||||
<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="info">
|
||||
<span class="label">{{ item.label }}</span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </vue-scroll> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -38,22 +36,22 @@ export default {
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
width: 190px;
|
||||
color: #fff;
|
||||
|
||||
.progress-item-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
top: 4px;
|
||||
transform: translateX(-99%);
|
||||
display: block;
|
||||
width: 150px;
|
||||
width: 190px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
@ -69,8 +67,8 @@ export default {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
const progress = this.$refs.Process;
|
||||
progress.scrollLeft = 30;
|
||||
progress.scrollLeft = 48;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- 信息窗体 -->
|
||||
@ -21,6 +21,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -28,28 +30,72 @@ export default {
|
||||
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: '建宁路与热河交叉路口' },
|
||||
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 }
|
||||
},
|
||||
};
|
||||
// 项目状态枚举
|
||||
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: {
|
||||
/** 查询数据 */
|
||||
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() {
|
||||
this.open = true;
|
||||
this.open = true
|
||||
},
|
||||
// 标记点 鼠标移出事件
|
||||
handleMouseleave() {
|
||||
this.open = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
this.open = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -89,7 +135,7 @@ export default {
|
||||
background-color: #44bfc598;
|
||||
border: 2px solid #89a483;
|
||||
border-radius: 4px;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -111,7 +157,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,7 +74,6 @@ export default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: url(../assets/temp/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftBox {
|
||||
width: 25%;
|
||||
@ -93,27 +92,29 @@ export default {
|
||||
}
|
||||
.centerBox {
|
||||
width: 50%;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
.center {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
.rightOne {
|
||||
height: 28%;
|
||||
height: 26%;
|
||||
}
|
||||
|
||||
.rightTwo {
|
||||
height: 22%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.rightThree,
|
||||
.rightFour {
|
||||
.rightThree {
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.rightFour {
|
||||
height: 19%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<div class="container">
|
||||
<vue-scroll style="height: 100%;">
|
||||
<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 class="list-item" v-for="(item, key) in list" :key="key">
|
||||
<span class="label">{{ item.label }}</span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
@ -15,18 +15,41 @@
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card'
|
||||
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'
|
||||
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
data: () => ({
|
||||
list: [
|
||||
{ name: '项目位置', content: '建宁路与热河交叉路口' },
|
||||
{ name: '用地面积', content: '112768.21㎡' },
|
||||
{ name: '建设单位', content: '中建四局发展(广州天河)有限公司' },
|
||||
{ name: '设计单位', content: '中国建筑第四工程局有限公司' },
|
||||
{ name: '勘察单位', content: '贵州中建建筑科研设计院有限公司' },
|
||||
{ name: '监理单位', content: '广州宏元建设工程咨询有限公司' },
|
||||
]
|
||||
})
|
||||
// 项目信息列表
|
||||
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 },
|
||||
},
|
||||
}),
|
||||
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>
|
||||
|
||||
@ -34,6 +57,7 @@ export default {
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -43,17 +67,18 @@ export default {
|
||||
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: 5px;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 9px 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #3b7589, #212c3e);
|
||||
background-image: linear-gradient(to right, #3b7589, #182337);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -61,12 +86,14 @@ export default {
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
padding: 20px 0;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
left: 6px;
|
||||
display: inline-block;
|
||||
transform: translate(0, -50%);
|
||||
width: 8px;
|
||||
|
||||
@ -99,9 +99,9 @@ export default {
|
||||
box-sizing: border-box;
|
||||
border-left: 4px solid #66d3d8;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #3b7589, #212c3e);
|
||||
background-image: linear-gradient(to right, #3b7589, #182337);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
@ -6,15 +6,15 @@
|
||||
<div class="image">
|
||||
<img src="../assets/images/command-center/instrument-panel.png" alt="">
|
||||
<div class="value">
|
||||
<span class="number">45</span>
|
||||
<span class="number">{{ pollingData.closeRatio || 0 }}</span>
|
||||
<span class="unit">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="label">巡检总数/已完成整改</span>
|
||||
<span class="label">已完成整改/巡检总数</span>
|
||||
<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>
|
||||
@ -23,19 +23,19 @@
|
||||
<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="number item">{{ days.kilobit }}</div>
|
||||
<div class="number item">{{ days.hundreds }}</div>
|
||||
<div class="number item">{{ days.decade }}</div>
|
||||
<div class="number item">{{ days.units }}</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>日
|
||||
<span>{{ startDate.year }} </span>年
|
||||
<span>{{ startDate.month }} </span>月
|
||||
<span>{{ startDate.day }} </span>日
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,11 +46,73 @@
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card'
|
||||
|
||||
import { resourceManagement } from '@/assets/js/api/zhongjianFourth'
|
||||
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
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>
|
||||
|
||||
@ -78,7 +140,7 @@ export default {
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
height: 150px;
|
||||
|
||||
.image {
|
||||
display: grid;
|
||||
@ -87,7 +149,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
height: 140px;
|
||||
height: 150px;
|
||||
}
|
||||
.value {
|
||||
position: absolute;
|
||||
@ -105,6 +167,14 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
|
||||
.number:nth-child(1) {
|
||||
color: #af5320;
|
||||
}
|
||||
|
||||
.number:nth-child(2) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -116,14 +186,6 @@ export default {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
.number:nth-child(1) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.number:nth-child(2) {
|
||||
color: #af5320;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,20 +6,24 @@
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<span class="label">已整改质量问题</span>
|
||||
<span class="value">(13)</span>
|
||||
<span class="value">({{ qualityProblem.rectificationNum || 0 }})</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="label">未整改质量问题</span>
|
||||
<span class="value">(14)</span>
|
||||
<span class="value">({{ qualityProblem.noRectificationNum || 0 }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<vue-scroll>
|
||||
<div class="list">
|
||||
<vue-scroll style="flex: 1;position: relative;">
|
||||
<div class="list" v-if="list.length">
|
||||
<div class="list-item" v-for="(item, index) in list" :key="index">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<span class="value">{{ item.content }}</span>
|
||||
<span class="label">{{ item.dangerName }}</span>
|
||||
<!-- <span class="value">{{ item.content }}</span> -->
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,24 +34,60 @@
|
||||
import Card from '../components/Card'
|
||||
import echarts from 'echarts4'
|
||||
|
||||
import { qualityManagement, listQualityManagement } from '@/assets/js/api/zhongjianFourth'
|
||||
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ name: '防水', content: '' },
|
||||
{ name: '门窗', content: '' },
|
||||
{ name: '钢结构工程', content: '' },
|
||||
{ name: '建筑装饰工程', content: '' },
|
||||
{ name: '主体结构', content: '' },
|
||||
{ name: '建筑电气', content: '' }
|
||||
]
|
||||
// 质量问题
|
||||
qualityProblem: {
|
||||
rectificationNum: undefined, // 整改数量
|
||||
noRectificationNum: undefined, // 未整改数量
|
||||
totalNum: undefined, // 总数量
|
||||
},
|
||||
list: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getQualityProblem()
|
||||
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['projectSn']),
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
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() {
|
||||
const myChart = echarts.init(this.$refs.chart)
|
||||
|
||||
@ -70,7 +110,7 @@ export default {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['76%', '88%'],
|
||||
radius: ['60%', '53%'],
|
||||
center: ['50%', '50%'],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
@ -80,7 +120,7 @@ export default {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: '14',
|
||||
value: this.qualityProblem.noRectificationNum || '0',
|
||||
name: '未整改质量问题',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@ -94,7 +134,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
value: '13',
|
||||
value: this.qualityProblem.rectificationNum || '0',
|
||||
name: '已整改质量问题',
|
||||
tooltip: {
|
||||
show: true
|
||||
@ -106,7 +146,7 @@ export default {
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '56',
|
||||
formatter: this.qualityProblem.totalNum || '56', // 中间的数值
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: '#ffc30f',
|
||||
@ -123,7 +163,7 @@ export default {
|
||||
type: 'pie',
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
radius: ['67%', '70%'],
|
||||
radius: ['47%', '45%'],
|
||||
center: ['50%', '50%'],
|
||||
color: ['#182337', '#60d3d0'],
|
||||
label: {
|
||||
@ -164,7 +204,7 @@ export default {
|
||||
.container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -184,7 +224,7 @@ export default {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
line-height: 34px;
|
||||
line-height: 25px;
|
||||
.left {
|
||||
color: #af5320;
|
||||
transform: translateX(-10%);
|
||||
@ -193,7 +233,7 @@ export default {
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
@ -204,10 +244,10 @@ export default {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-left: 4px solid #66d3d8;
|
||||
margin-bottom: 5px;
|
||||
padding: 7px 0;
|
||||
margin-bottom: 2px;
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #3b7589, #212c3e);
|
||||
background-image: linear-gradient(to right, #3b7589, #182337);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@ -216,11 +256,13 @@ export default {
|
||||
|
||||
&:hover {
|
||||
padding: 15px 0;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 4px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
left: 6px;
|
||||
display: inline-block;
|
||||
transform: translate(0, -50%);
|
||||
width: 6.6px;
|
||||
@ -232,6 +274,7 @@ export default {
|
||||
.value {
|
||||
color: #c2805f;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -243,6 +286,7 @@ export default {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-5%) scale(90%);
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user