Merge branch 'dev-jack' into shenzhen-dev

This commit is contained in:
Jack 2022-08-08 14:21:15 +08:00
commit 2ffc6b83a8
8 changed files with 178 additions and 304 deletions

View File

@ -1,21 +1,18 @@
<template>
<!-- 问题占比 -->
<div class="frequentProblems">
<div class="title">{{ title }}</div>
<div class="content">
<JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
</div>
</div>
<Card :title="title">
<JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" :color="['#557DEE']" />
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JBarChart from '../jChart/bar/JBarChart.vue'
export default {
components: { JBarChart },
components: { Card, JBarChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -27,20 +24,4 @@ export default {
}
</script>
<style lang="less" scoped>
.frequentProblems {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
}
}
</style>
<style lang="less" scoped></style>

View File

@ -1,8 +1,6 @@
<template>
<!-- 问题占比 -->
<div class="questionRate">
<div class="title">{{ title }}</div>
<div class="content">
<Card :title="title">
<div class="warp">
<div class="chart">
<JRingChart
:title="{ text: 3412, subTitle: '问题总数' }"
@ -22,17 +20,18 @@
</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
components: { Card, JRingChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -42,58 +41,46 @@ export default {
</script>
<style lang="less" scoped>
.questionRate {
width: 100%;
.warp {
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
display: flex;
.chart {
width: 55%;
height: 100%;
}
.content {
height: calc(100% - 30px);
.count {
flex: 1;
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;
top: 10px;
content: '';
width: 6px;
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;
}
flex-direction: column;
justify-content: center;
align-items: center;
.count-item {
position: relative;
&::before {
position: absolute;
left: -16px;
top: 10px;
content: '';
width: 6px;
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;
}
}
}

View File

@ -1,45 +1,27 @@
<template>
<div class="question-type">
<div class="title">{{ title }}</div>
<div class="content">
<JProgressChart :seriesData="seriesData" :yData="yData" />
</div>
</div>
<Card :title="title">
<JProgressChart :seriesData="seriesData" :yData="yData" />
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
export default {
components: { JProgressChart },
components: { Card, JProgressChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
return {
yData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
yData: ['砌体工程', '混凝土工程', '盾构隧道', '雨水管道', '钢筋工程', '桩基础'].reverse(),
seriesData: [100, 235, 232, 532, 112, 532]
}
}
}
</script>
<style lang="less" scoped>
.question-type {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
}
}
</style>
<style lang="less" scoped></style>

View File

@ -1,25 +1,23 @@
<template>
<div class="problemTrend">
<div class="title">{{ title }}</div>
<div class="content">
<JLineChart :xData="xData" :series="series" :title="{ text: '最近30天质量问题趋势分析' }" />
</div>
</div>
<Card :title="title">
<JLineChart :xData="xData" :series="series" :title="{ text: '最近30天质量问题趋势分析' }" />
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JLineChart from '../jChart/line/JLineChart.vue'
export default {
components: { JLineChart },
components: { Card, JLineChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
return {
xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
xData: new Array(10).fill('12-24'),
series: [
{
data: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33],
@ -36,20 +34,4 @@ export default {
}
</script>
<style lang="less" scoped>
.problemTrend {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
}
}
</style>
<style lang="less" scoped></style>

View File

@ -1,7 +1,5 @@
<template>
<!-- 质量问题 -->
<div class="wrap">
<div class="title">{{ title }}</div>
<Card :title="title">
<div class="charts">
<div class="chart">
<JRingChart :title="{ text: 45, subTitle: '问题总数' }" :color="['#3CABFD']" />
@ -23,17 +21,18 @@
/>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
components: { Card, JRingChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -43,26 +42,14 @@ export default {
</script>
<style lang="less" scoped>
.wrap {
width: 100%;
.charts {
padding: 10px 30px 0;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.charts {
padding: 10px 30px 0;
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
}
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
}
}
</style>

View File

@ -1,35 +1,33 @@
<template>
<div class="safety-warning">
<div class="title">{{ title }}</div>
<div class="content">
<div class="table">
<div class="thead">
<div class="row">
<div class="td">预警时间</div>
<div class="td">预警类型</div>
<div class="td"></div>
</div>
<Card :title="title">
<div class="table">
<div class="thead">
<div class="row">
<div class="td">预警时间</div>
<div class="td">预警类型</div>
<div class="td"></div>
</div>
<div class="tbody">
<div class="row" v-for="i in 5" :key="i">
<div class="td">2022.03.05 15:23:22</div>
<div class="td">边临防护</div>
<div class="td">详情</div>
</div>
</div>
<div class="tbody">
<div class="row" v-for="i in 5" :key="i">
<div class="td">2022.03.05 15:23:22</div>
<div class="td">边临防护</div>
<div class="td">详情</div>
</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
components: { Card, JRingChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -39,50 +37,35 @@ export default {
</script>
<style lang="less" scoped>
.safety-warning {
width: 100%;
.table {
padding: 0 6px;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
.table {
padding: 0 6px;
height: 100%;
font-size: 14px;
color: #fff;
.thead,
.tbody {
&.thead {
margin-bottom: 5px;
padding-bottom: 5px;
color: #6ee4f0;
border-bottom: 1px solid #fff;
font-size: 14px;
color: #fff;
.thead,
.tbody {
&.thead {
margin-bottom: 5px;
padding-bottom: 5px;
color: #6ee4f0;
border-bottom: 1px solid #fff;
}
.row {
width: 100%;
display: flex;
.td {
height: 30px;
line-height: 30px;
&:nth-child(1) {
width: 40%;
}
.row {
width: 100%;
display: flex;
.td {
height: 30px;
line-height: 30px;
&:nth-child(1) {
width: 40%;
}
&:nth-child(2) {
flex: 1;
}
&:nth-child(3) {
margin-right: 10px;
color: #6ee4f0;
cursor: pointer;
}
}
&:nth-child(2) {
flex: 1;
}
&:nth-child(3) {
margin-right: 10px;
color: #6ee4f0;
cursor: pointer;
}
}
}

View File

@ -1,20 +1,18 @@
<template>
<div class="question-type">
<div class="title">{{ title }}</div>
<div class="content">
<JProgressChart :seriesData="seriesData" :yData="yData" />
</div>
</div>
<Card :title="title">
<JProgressChart :seriesData="seriesData" :yData="yData" />
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
export default {
components: { JProgressChart },
components: { Card, JProgressChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -36,20 +34,4 @@ export default {
}
</script>
<style lang="less" scoped>
.question-type {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
}
}
</style>
<style lang="less" scoped></style>

View File

@ -1,6 +1,5 @@
<template>
<div class="wrap">
<div class="title">{{ title }}</div>
<Card :title="title">
<div class="charts">
<div class="chart">
<JRingChart :title="{ text: 45, subTitle: '检查总数' }" :color="['#3CABFD']" />
@ -32,17 +31,18 @@
</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
components: { Card, JRingChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -52,65 +52,55 @@ export default {
</script>
<style lang="less" scoped>
.wrap {
.charts {
padding: 10px 30px 0;
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
}
.charts {
padding: 10px 30px 0;
.count {
margin-top: -36px;
width: 14%;
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
}
.count {
width: 14%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.count-item {
position: relative;
&::before {
position: absolute;
left: -16px;
top: 10px;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
}
&:first-child {
margin-bottom: 20px;
}
&:first-child::before {
background-color: #557dee;
}
&:last-child::before {
background-color: #ff6c7f;
}
.num {
margin-bottom: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
span {
font-size: 18px;
color: #fff;
}
}
.rate {
font-size: 14px;
flex-direction: column;
justify-content: center;
align-items: center;
.count-item {
position: relative;
&::before {
position: absolute;
left: -16px;
top: 10px;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
}
&:first-child {
margin-bottom: 20px;
}
&:first-child::before {
background-color: #557dee;
}
&:last-child::before {
background-color: #ff6c7f;
}
.num {
margin-bottom: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
span {
font-size: 18px;
color: #fff;
}
}
.rate {
font-size: 14px;
}
}
}
}