Merge branch 'shenzhen-dev' of http://10.0.0.60/dhp/zhgdyun into shenzhen-dev

This commit is contained in:
骆乐 2022-09-08 11:19:22 +08:00
commit acac856190
15 changed files with 296 additions and 275 deletions

View File

@ -28,13 +28,17 @@ export default {
series: [ series: [
{ {
roseType: 'area', roseType: 'area',
startAngle:90,
radius: ['58%', '54%'], radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'], color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40] data: [30, 40, 30, 40],
hoverAnimation:false,
}, },
{ {
color: ['#3CABFC', '#FF6C7F', '#6EE4F0', '#557EED'], color: ['#3CABFC', '#FF6C7F', '#6EE4F0', '#557EED'],
data startAngle:90,
data,
hoverAnimation:false,
} }
] ]
} }

View File

@ -32,6 +32,16 @@ export default {
mounted() { mounted() {
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart) this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
this.createChart() this.createChart()
this.$nextTick(() => {
this.drawChart();
this.timer = setInterval(() => {
this.doing();
}, 200);
});
},
destroyed(){
clearInterval(this.timer)
this.timer = ''
}, },
data() { data() {
return { return {
@ -97,7 +107,17 @@ export default {
delete option.legend; delete option.legend;
} }
this.jNestedRingChart.setOption(option) this.jNestedRingChart.setOption(option)
} },
drawChart() {
this.myChart = echarts.init(this.$refs.jNestedRingChart);
this.option = {
series: this.series
};
},
doing() {//
this.series[0].startAngle = this.series[0].startAngle - 5;
this.myChart.setOption(this.option);
},
}, },
watch: { watch: {
series() { series() {

View File

@ -19,21 +19,25 @@ export default {
data() { data() {
return { return {
series: [ series: [
{
roseType: 'area',
startAngle:90,
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40],
hoverAnimation:false,
},
{ {
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',], color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
startAngle:90,
data: [ data: [
{ value: 45, name: '文明施工' }, { value: 45, name: '文明施工' },
{ value: 5, name: '未分类' }, { value: 5, name: '未分类' },
{ value: 15, name: '安全管理' }, { value: 15, name: '安全管理' },
{ value: 10, name: '施工安全' }, { value: 10, name: '施工安全' },
{ value: 45, name: '基础工程' }, { value: 45, name: '基础工程' },
] ],
}, hoverAnimation:false,
{
roseType: 'area',
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40]
} }
] ]
} }

View File

@ -45,20 +45,24 @@ export default {
ybUrgentLevelNum: 10 ybUrgentLevelNum: 10
}, },
series: [ series: [
{
color: ['#3aaaff', '#ff6982'],
center: ['50%', '50%'],
data: [
{ value: 50, name: '已整改质量问题' },
{ value: 15, name: '未整改质量问题' }
]
},
{ {
roseType: 'area', roseType: 'area',
startAngle:90,
center: ['50%', '50%'], center: ['50%', '50%'],
radius: ['58%', '54%'], radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'], color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40] data: [30, 40, 30, 40],
hoverAnimation:false,
},
{
color: ['#3aaaff', '#ff6982'],
center: ['50%', '50%'],
startAngle:90,
data: [
{ value: 50, name: '已整改质量问题' },
{ value: 15, name: '未整改质量问题' }
],
hoverAnimation:false,
} }
] ]
} }

View File

@ -29,7 +29,22 @@ export default {
ybUrgentLevelNum: '', ybUrgentLevelNum: '',
yzUrgentLevelNum: '' yzUrgentLevelNum: ''
}, },
series: [] series: [
{
roseType: 'area',
startAngle: 90,
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40],
hoverAnimation:false,
},
{
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
startAngle: 90,
data: [],
hoverAnimation:false,
}
]
} }
}, },
created() { created() {
@ -44,22 +59,11 @@ export default {
selectQualityStatisticsApi(data).then(res => { selectQualityStatisticsApi(data).then(res => {
const data = res.result || {} const data = res.result || {}
this.total = data.total this.total = data.total
this.series = [ this.series[1].data = [
{
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
data: [
{ value: this.total.jyUrgentLevelNum, name: '紧要问题' }, { value: this.total.jyUrgentLevelNum, name: '紧要问题' },
{ value: this.total.yzUrgentLevelNum, name: '严重问题' }, { value: this.total.yzUrgentLevelNum, name: '严重问题' },
{ value: this.total.ybUrgentLevelNum, name: '一般问题' } { value: this.total.ybUrgentLevelNum, name: '一般问题' }
] ]
},
{
roseType: 'area',
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40]
}
]
}) })
} }
} }
@ -74,18 +78,22 @@ export default {
.content { .content {
height: calc(100% - 30px); height: calc(100% - 30px);
display: flex; display: flex;
.chart { .chart {
width: 55%; width: 55%;
height: 100%; height: 100%;
} }
.count { .count {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.count-item { .count-item {
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
left: -16px; left: -16px;
@ -95,20 +103,25 @@ export default {
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
} }
&:first-child { &:first-child {
margin-bottom: 20px; margin-bottom: 20px;
} }
&:first-child::before { &:first-child::before {
background-color: #557dee; background-color: #557dee;
} }
&:last-child::before { &:last-child::before {
background-color: #43d7b5; background-color: #43d7b5;
} }
.label { .label {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
.num { .num {
font-size: 18px; font-size: 18px;
} }

View File

@ -36,29 +36,32 @@ export default {
mounted() { mounted() {
selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => { selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {
const totals = res.result.total const totals = res.result.total
this.series = [ this.series[1].data = [
{
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
data: [
{ value: totals.weekInspectNum, name: '周检' }, { value: totals.weekInspectNum, name: '周检' },
{ value: totals.monthInspectNum, name: '月检' }, { value: totals.monthInspectNum, name: '月检' },
{ value: totals.otherInspectNum, name: '其他' } { value: totals.otherInspectNum, name: '其他' }
] ]
},
{
roseType: 'area',
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40]
}
]
this.totalNum = totals.totalNum this.totalNum = totals.totalNum
}) })
}, },
data() { data() {
return { return {
projectSn: this.$store.state.projectSn, projectSn: this.$store.state.projectSn,
series: [], series: [
{
roseType: 'area',
startAngle:90,
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40],
hoverAnimation:false,
},{
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
startAngle:90,
data:[],
hoverAnimation:false,
}
],
total: 0 total: 0
} }
}, },

View File

@ -0,0 +1,99 @@
<!-- 步骤条 -->
<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>
</div>
<!-- </vue-scroll> -->
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
}
}
}
</script>
<style lang="scss" scoped>
.progress {
display: flex;
align-items: center;
width: 100%;
height: 100%;
.progress-item {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: center;
width: 150px;
color: #fff;
.progress-item-dot {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
&::after {
content: '';
position: absolute;
top: 3px;
transform: translateX(-99%);
display: block;
width: 150px;
height: 2px;
background: #fff;
}
&.active {
&::after {
background: #6dc6d8;
}
}
&::before {
content: '';
position: relative;
z-index: 9;
display: block;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
}
}
.info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
height: 60px;
.label {
margin-bottom: 20px;
}
}
&:first-child {
.progress-item-dot {
&::after {
display: none;
}
}
}
}
}
</style>

View File

@ -1,139 +0,0 @@
<!-- 步骤条 -->
<template>
<vue-scroll style="height: 100px;">
<div class="steps">
<div class="steps-item" v-for="(item, index) in items" :key="index">
<p :class="['steps-item-line', activeIndex === index ? 'active' : '']"></p>
<p :class="['steps-item-num', activeIndex === index ? 'active' : '']"></p>
<div class="steps-item-text'" :class="['steps-item-text', activeIndex === index ? 'activeText' : '']">
<span class="label">{{ item.label }}</span>
<span class="value">{{ item.value }}</span>
</div>
</div>
</div>
</vue-scroll>
</template>
<style lang='scss' scoped>
.steps {
// width: 100%;
display: flex;
height: 80px;
&-item {
width: 150px;
height: 34px;
padding-top: 15px;
position: relative;
// 线
&-line {
width: 100%;
height: 4px;
background: #6dc6d8;
}
//
&-num {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
line-height: 34px;
color: #fff;
text-align: center;
position: absolute;
top: 11px;
left: calc(50% - 17px);
}
//
&-text {
text-align: center;
margin-top: 24px;
}
//
.active {
// background: #6dc6d8;
}
.activeText {
// color: #0EAEE9;
}
}
.steps-item-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
transform: translateX(-11px);
.label {
color: #9da9b9;
font-size: 12px;
margin-bottom: 10px;
}
.value {
font-size: 15px;
}
}
.steps-item:first-child {
width: 80px;
.steps-item-line {
border-radius: 12px 0 0 12px;
}
.steps-item-num {
left: 0px;
}
.steps-item-text {
align-items: flex-start;
transform: translateX(0px);
}
}
.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>
<script>
export default {
props: {
//
items: {
type: Array,
required: true
},
//
activeIndex: {
type: Number,
default: 0,
required: true
}
},
data () {
return {
}
}
}
</script>

View File

@ -1,45 +1,33 @@
<template> <template>
<Card title="进度管理"> <Card title="进度管理">
<div class="container"> <div class="container" ref="Process">
<Steps :items="items" :activeIndex="index" /> <Process style="transform: translateX(0)" :list="list" />
</div> </div>
</Card> </Card>
</template> </template>
<script> <script>
import Process from './Process'
import Steps from './Steps'
import Card from '../../components/Card' import Card from '../../components/Card'
export default { export default {
components: { Card, Steps }, components: { Card, Process },
data() { data() {
return { return {
items: [ list: [
{ { label: '2022-01-01', value: '基础工程', active: true },
label: '2022-01-01', { label: '2022-02-14', value: '主题结构施工', active: true },
value: '基础工程' { label: '2022-03-25', value: '屋面工程', active: true },
}, { label: '2022-07-31', value: '机械设备安拆工程', active: true },
{ { label: '2022-21-31', value: '室内装饰装修工程' }
label: '2022-02-14',
value: '主题结构施工'
},
{
label: '2022-03-25',
value: '屋面工程'
},
{
label: '2022-07-31',
value: '机械设备安拆工程'
},
{
label: '2022-21-31',
value: '室内装饰装修工程'
},
], ],
index: 0 index: 0
} }
} },
mounted() {
const progress = this.$refs.Process;
progress.scrollLeft = 30;
},
} }
</script> </script>

View File

@ -79,11 +79,14 @@ export default {
.leftBox { .leftBox {
width: 25%; width: 25%;
.leftOne { .leftOne {
width: 100%; height: 28%;
height: 30%;
} }
.leftThree {
height: 22%;
}
.leftTwo, .leftTwo,
.leftThree,
.leftFour { .leftFour {
height: 25%; height: 25%;
} }

View File

@ -342,24 +342,24 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
transform: translateY(-15px); // transform: translateY(-15px);
.item { .item {
display: inline-block; display: inline-block;
width: calc(100% / 2); width: calc(100% / 2);
height: 110%; height: 100%;
color: transparent; color: transparent;
&:nth-child(1) { &:nth-child(1) {
transform: translate(-22%, -6%); transform: translate(-24%, 0%);
} }
&:nth-child(2) { &:nth-child(2) {
transform: translate(-48%, -6%); transform: translate(-48%, 0%);
} }
&:nth-child(3) { &:nth-child(3) {
transform: translate(-75%, -6%); transform: translate(-75%, 0%);
} }
} }
} }

View File

@ -1,12 +1,14 @@
<template> <template>
<Card title="项目信息"> <Card title="项目信息">
<div class="container"> <div class="container">
<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, index) in list" :key="index">
<span class="label">{{ item.name }}</span> <span class="label">{{ item.name }}</span>
<span class="value">{{ item.content }}</span> <span class="value">{{ item.content }}</span>
</div> </div>
</div> </div>
</vue-scroll>
</div> </div>
</Card> </Card>
</template> </template>
@ -41,7 +43,7 @@ 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 {
position: relative; position: relative;

View File

@ -9,12 +9,14 @@
@click="handelItemClick(index)" @click="handelItemClick(index)"
>{{ item }}</div> >{{ item }}</div>
</div> </div>
<vue-scroll style="height: calc(100% - 27px);">
<div class="bottom list"> <div class="bottom list">
<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.name }}</span>
<span class="value">{{ item.content }}</span> <span class="value">{{ item.content }}</span>
</div> </div>
</div> </div>
</vue-scroll>
</div> </div>
</Card> </Card>
</template> </template>
@ -89,7 +91,7 @@ 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 {
position: relative; position: relative;

View File

@ -13,12 +13,14 @@
<span class="value">(14)</span> <span class="value">(14)</span>
</div> </div>
</div> </div>
<vue-scroll>
<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, index) in list" :key="index">
<span class="label">{{ item.name }}</span> <span class="label">{{ item.name }}</span>
<span class="value">{{ item.content }}</span> <span class="value">{{ item.content }}</span>
</div> </div>
</div> </div>
</vue-scroll>
</div> </div>
</div> </div>
</Card> </Card>

View File

@ -1,4 +1,5 @@
<template> <template>
<vue-scroll>
<div class="zjsj-large-screen"> <div class="zjsj-large-screen">
<div class="header"> <div class="header">
<div class="info"> <div class="info">
@ -35,6 +36,7 @@
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
</vue-scroll>
</template> </template>
<script> <script>
@ -57,9 +59,10 @@ export default {
@import url("./style.less"); @import url("./style.less");
.zjsj-large-screen { .zjsj-large-screen {
width: 100%; width: 100%;
height: 100%; // height: 100%;
color: #fff; color: #fff;
background-color: #182337; background-color: #182337;
overflow-y: scroll;
.header { .header {
width: 100%; width: 100%;
height: 110px; height: 110px;
@ -157,16 +160,29 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 12px 20px; padding: 12px 20px;
width: 100%; width: 100%;
height: calc(100% - 110px); height: calc(1080px - 110px);
} }
} }
/* 全局滚动条样式 */ /* 全局滚动条样式 */
::v-deep ::-webkit-scrollbar { ::v-deep ::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 0 !important; width: 6px !important;
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
height: 8 !important; height: 6px !important;
cursor: pointer !important; cursor: pointer !important;
} }
::v-deep ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 3px !important;
box-shadow: inset 0 0 10px rgba(144, 147, 153, 0.2) !important;
background: rgba(144, 147, 153, 0.5) !important;
cursor: pointer !important;
}
::v-deep ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(238, 238, 238, 0) !important;
border-radius: 10px !important;
/* background: #ededed; */
}
</style> </style>