Merge branch 'shenzhen-dev' of http://10.0.0.60/dhp/zhgdyun into shenzhen-dev
This commit is contained in:
骆乐
commit
acac856190
@ -28,13 +28,17 @@ export default {
|
||||
series: [
|
||||
{
|
||||
roseType: 'area',
|
||||
startAngle:90,
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40]
|
||||
data: [30, 40, 30, 40],
|
||||
hoverAnimation:false,
|
||||
},
|
||||
{
|
||||
color: ['#3CABFC', '#FF6C7F', '#6EE4F0', '#557EED'],
|
||||
data
|
||||
startAngle:90,
|
||||
data,
|
||||
hoverAnimation:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -32,6 +32,16 @@ export default {
|
||||
mounted() {
|
||||
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
||||
this.createChart()
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
this.timer = setInterval(() => {
|
||||
this.doing();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
destroyed(){
|
||||
clearInterval(this.timer)
|
||||
this.timer = ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -97,7 +107,17 @@ export default {
|
||||
delete option.legend;
|
||||
}
|
||||
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: {
|
||||
series() {
|
||||
|
||||
@ -19,21 +19,25 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
roseType: 'area',
|
||||
startAngle:90,
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40],
|
||||
hoverAnimation:false,
|
||||
},
|
||||
{
|
||||
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
|
||||
startAngle:90,
|
||||
data: [
|
||||
{ value: 45, name: '文明施工' },
|
||||
{ value: 5, name: '未分类' },
|
||||
{ value: 15, name: '安全管理' },
|
||||
{ value: 10, name: '施工安全' },
|
||||
{ value: 45, name: '基础工程' },
|
||||
]
|
||||
},
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40]
|
||||
],
|
||||
hoverAnimation:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -45,20 +45,24 @@ export default {
|
||||
ybUrgentLevelNum: 10
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: ['#3aaaff', '#ff6982'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 50, name: '已整改质量问题' },
|
||||
{ value: 15, name: '未整改质量问题' }
|
||||
]
|
||||
},
|
||||
{
|
||||
roseType: 'area',
|
||||
startAngle:90,
|
||||
center: ['50%', '50%'],
|
||||
radius: ['58%', '54%'],
|
||||
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,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -29,7 +29,22 @@ export default {
|
||||
ybUrgentLevelNum: '',
|
||||
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() {
|
||||
@ -44,22 +59,11 @@ export default {
|
||||
selectQualityStatisticsApi(data).then(res => {
|
||||
const data = res.result || {}
|
||||
this.total = data.total
|
||||
this.series = [
|
||||
{
|
||||
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
|
||||
data: [
|
||||
this.series[1].data = [
|
||||
{ value: this.total.jyUrgentLevelNum, name: '紧要问题' },
|
||||
{ value: this.total.yzUrgentLevelNum, 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 {
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
|
||||
.chart {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.count {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.count-item {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
@ -95,20 +103,25 @@ export default {
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
background-color: #557dee;
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
background-color: #43d7b5;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@ -36,29 +36,32 @@ export default {
|
||||
mounted() {
|
||||
selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {
|
||||
const totals = res.result.total
|
||||
this.series = [
|
||||
{
|
||||
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
|
||||
data: [
|
||||
this.series[1].data = [
|
||||
{ value: totals.weekInspectNum, name: '周检' },
|
||||
{ value: totals.monthInspectNum, name: '月检' },
|
||||
{ value: totals.otherInspectNum, name: '其他' }
|
||||
]
|
||||
},
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40]
|
||||
}
|
||||
]
|
||||
this.totalNum = totals.totalNum
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
99
src/views/projectAdmin/zjsj/command/LeftThree/Process.vue
Normal file
99
src/views/projectAdmin/zjsj/command/LeftThree/Process.vue
Normal 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>
|
||||
@ -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>
|
||||
@ -1,45 +1,33 @@
|
||||
<template>
|
||||
<Card title="进度管理">
|
||||
<div class="container">
|
||||
<Steps :items="items" :activeIndex="index" />
|
||||
<div class="container" ref="Process">
|
||||
<Process style="transform: translateX(0)" :list="list" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Steps from './Steps'
|
||||
import Process from './Process'
|
||||
import Card from '../../components/Card'
|
||||
|
||||
export default {
|
||||
components: { Card, Steps },
|
||||
components: { Card, Process },
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: '2022-01-01',
|
||||
value: '基础工程'
|
||||
},
|
||||
{
|
||||
label: '2022-02-14',
|
||||
value: '主题结构施工'
|
||||
},
|
||||
{
|
||||
label: '2022-03-25',
|
||||
value: '屋面工程'
|
||||
},
|
||||
{
|
||||
label: '2022-07-31',
|
||||
value: '机械设备安拆工程'
|
||||
},
|
||||
{
|
||||
label: '2022-21-31',
|
||||
value: '室内装饰装修工程'
|
||||
},
|
||||
list: [
|
||||
{ label: '2022-01-01', value: '基础工程', active: true },
|
||||
{ label: '2022-02-14', value: '主题结构施工', active: true },
|
||||
{ label: '2022-03-25', value: '屋面工程', active: true },
|
||||
{ label: '2022-07-31', value: '机械设备安拆工程', active: true },
|
||||
{ label: '2022-21-31', value: '室内装饰装修工程' }
|
||||
],
|
||||
index: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const progress = this.$refs.Process;
|
||||
progress.scrollLeft = 30;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -79,11 +79,14 @@ export default {
|
||||
.leftBox {
|
||||
width: 25%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
height: 28%;
|
||||
}
|
||||
|
||||
.leftThree {
|
||||
height: 22%;
|
||||
}
|
||||
|
||||
.leftTwo,
|
||||
.leftThree,
|
||||
.leftFour {
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
@ -342,24 +342,24 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
transform: translateY(-15px);
|
||||
// transform: translateY(-15px);
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(100% / 2);
|
||||
height: 110%;
|
||||
height: 100%;
|
||||
color: transparent;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translate(-22%, -6%);
|
||||
transform: translate(-24%, 0%);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: translate(-48%, -6%);
|
||||
transform: translate(-48%, 0%);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translate(-75%, -6%);
|
||||
transform: translate(-75%, 0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<Card title="项目信息">
|
||||
<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>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -41,7 +43,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
overflow-y: scroll;
|
||||
// overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
|
||||
@ -9,12 +9,14 @@
|
||||
@click="handelItemClick(index)"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
<vue-scroll style="height: calc(100% - 27px);">
|
||||
<div class="bottom 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>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -89,7 +91,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
overflow-y: scroll;
|
||||
// overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
|
||||
@ -13,12 +13,14 @@
|
||||
<span class="value">(14)</span>
|
||||
</div>
|
||||
</div>
|
||||
<vue-scroll>
|
||||
<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>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<vue-scroll>
|
||||
<div class="zjsj-large-screen">
|
||||
<div class="header">
|
||||
<div class="info">
|
||||
@ -35,6 +36,7 @@
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -57,9 +59,10 @@ export default {
|
||||
@import url("./style.less");
|
||||
.zjsj-large-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
color: #fff;
|
||||
background-color: #182337;
|
||||
overflow-y: scroll;
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
@ -157,16 +160,29 @@ export default {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
height: calc(100% - 110px);
|
||||
height: calc(1080px - 110px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局滚动条样式 */
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 0 !important;
|
||||
width: 6px !important;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 8 !important;
|
||||
height: 6px !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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user