Merge branch 'dev-jack' into shenzhen-dev
This commit is contained in:
commit
2ffc6b83a8
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user