admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev-jack' into shenzhen-dev

Browse Source
This commit is contained in:
Jack 2022-08-27 09:13:32 +08:00
commit ce0eb6dc2c
21 changed files with 1385 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/views/projectAdmin/common/jChart/bar/JBarChart.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="j-bar-chart" ref="jBarChart"></div>
</template>
<script>
import echarts from 'echarts4'
export default {
props: {
title: {
type: Object,
default: () => ({
text: ''
})
},
tooltip: {
type: Object,
default: () => ({ show: false })
},
grid: {
type: Array,
default: () => ['15%', '2%', '2%', '2%']
},
color: {
type: Array,
default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
},
xData: {
required: true,
type: Array,
default: () => []
},
yData: {
type: Array,
default: () => []
},
series: {
type: Array,
default: () => []
}
},
mounted() {
this.jBarChart = echarts.init(this.$refs.jBarChart)
this.createChart()
},
data() {
return { jBarChart: null }
},
watch: {
xData: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createChart()
}
},
deep: true
},
yData: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createChart()
}
},
deep: true
}
},
methods: {
createChart() {
const { title, tooltip, grid, color, xData, yData, series } = this
const configSeries = (series => {
if (series.length) {
return series.map(item => ({ name: item.name, type: 'bar', data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
} else {
return [{ data: yData, type: 'bar', barWidth: 15 }]
}
})(series)
const option = {
title: {
text: title.text,
right: 20,
textStyle: {
fontSize: '14px',
color: '#5EC2D0',
fontWeight: 'normal'
}
},
legend: {
icon: 'circle',
top: 15,
left: 20,
itemWidth: 8,
textStyle: { color: '#fff' },
data: [{ name: '计划用料' }, { name: '实际用料' }]
},
tooltip,
grid: {
top: grid[0],
right: grid[1],
bottom: grid[2],
left: grid[3],
containLabel: true
},
color,
xAxis: {
type: 'category',
data: xData,
axisLine: {
show: true,
lineStyle: {
type: [5, 10]
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
type: [5, 10],
color: '#323D50'
}
},
axisLine: {
show: true,
lineStyle: {
type: [5, 10]
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
}
},
series: configSeries
}
this.jBarChart.setOption(option)
}
}
}
</script>
<style>
.j-bar-chart {
width: 100%;
height: 100%;
}
</style>

139
src/views/projectAdmin/common/jChart/bar/JProgressChart.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="j-progress-chart" ref="JProgressChart"></div>
</template>
<script>
import echarts from 'echarts4'
export default {
props: {
grid: {
type: Array,
default: () => ['10', '8%', '10', '10']
},
seriesData: {
required: true,
type: Array,
default: () => []
},
yData: {
required: true,
type: Array,
default: () => []
}
},
mounted() {
this.JProgressChart = echarts.init(this.$refs.JProgressChart)
this.createChart()
},
data() {
return { JProgressChart: null }
},
watch:{
seriesData:{
handler(newVal,oldVal){
if(newVal != oldVal){
this.createChart();
}
},
deep:true,
}
},
methods: {
createChart() {
const { grid, seriesData, yData } = this
const max = Math.max(...seriesData)
const maxData = seriesData.map(item => max)
const option = {
grid: {
top: grid[0],
right: grid[1],
bottom: grid[2],
left: grid[3],
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: () => ''
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
data: yData,
axisLabel: {
textStyle: {
fontSize: 12,
color: '#fff'
}
}
},
series: [
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#4A90E2' },
{ offset: 1, color: '#4ADEE2' }
]),
barBorderRadius: 3
},
label: {
show: true,
position: 'right',
color: 'white',
textStyle: {
fontSize: 15
}
},
data: seriesData,
barWidth: 13
},
{
type: 'bar',
itemStyle: {
color: 'rgba(255, 255, 255, 0.1)',
barBorderRadius: 3
},
// label: {
// show: true,
// position: 'right',
// color: 'white',
// textStyle: {
// fontSize: 15
// }
// },
barGap: '-100%',
barCategoryGap: '40%',
data: maxData,
barWidth: 13,
animation: false
}
]
}
this.JProgressChart.setOption(option)
}
}
}
</script>
<style>
.j-progress-chart {
width: 100%;
height: 100%;
}
</style>

165
src/views/projectAdmin/common/jChart/line/JLineChart.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div class="j-line-chart" ref="JLineChart"></div>
</template>
<script>
import echarts from 'echarts4'
export default {
props: {
title: {
type: Object,
default: () => ({ text: '' })
},
grid: {
type: Array,
default: () => ['12%', '2%', '6%', '1%']
},
color: {
type: Array,
default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
},
xData: {
required: true,
type: Array,
default: () => []
},
series: {
required: true,
type: Array,
default: () => [{}]
}
},
mounted() {
this.JLineChart = echarts.init(this.$refs.JLineChart)
this.createChart()
},
data() {
return { JLineChart: null }
},
watch: {
xData: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createChart()
}
},
deep: true,
immediate: true
},
series: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createChart()
}
},
deep: true,
immediate: true
}
},
methods: {
createChart() {
const { title, grid, color, xData, series } = this
const fmtSeries = (series => {
return series.map(item => ({
name: item.name,
type: 'line',
smooth: true,
data: item.data,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: item.areaColor[0] },
{ offset: 1, color: item.areaColor[1] }
])
},
showSymbol: item.showSymbol,
itemStyle: {
emphasis: item.emphasis
}
}))
})(series)
const option = {
title: {
text: title.text,
right: 20,
textStyle: {
fontSize: '14px',
color: '#5EC2D0',
fontWeight: 'normal'
}
},
legend: {
left: 20,
textStyle: {
color: '#fff'
}
},
grid: {
top: grid[0],
right: grid[1],
bottom: grid[2],
left: grid[3],
containLabel: true
},
tooltip: {
trigger: 'axis'
},
color,
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, .8)'
}
},
axisLine: {
lineStyle: {
type: [5, 10],
color: '#364252'
}
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, .8)'
}
},
axisLine: {
show: true,
lineStyle: {
type: [5, 10],
color: '#787E8A'
}
},
splitLine: {
lineStyle: {
type: [5, 10],
color: '#364252'
}
}
},
series: fmtSeries
}
this.JLineChart.setOption(option)
}
}
}
</script>
<style>
.j-line-chart {
width: 100%;
height: 100%;
}
</style>

108
src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
</template>
<script>
import echarts from 'echarts4'
export default {
props: {
title: {
type: Object,
default: () => ({
text: '',
subTitle: '',
x: '48%',
y: '36%'
})
},
legend: {
type: Object,
default: () => ({})
},
series: {
required: true,
type: Array,
default: () => []
}
},
mounted() {
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
this.createChart()
},
data() {
return {
jNestedRingChart: null
}
},
methods: {
createChart() {
const { title, legend, series } = this
const setSeries = (series => {
return series.map(item => ({
type: 'pie',
label: false,
center: ['50%', '50%'],
radius: item.radius || ['65%', '80%'],
roseType: item.roseType,
color: item.color,
data: item.data
}))
})(series)
const option = {
title: {
text: title.text,
subtext: title.subTitle,
x: title.x || '49%',
y: title.y || '40%',
show: true,
textAlign: 'center',
textStyle: {
fontSize: 20,
fontWeight: 'normal',
color: '#fff'
},
subtextStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
show: legend.show === false ? false : true,
type: 'scroll',
orient: 'vertical',
right: 50,
top: 'center',
itemWidth: 10,
itemHeight: 10,
selectedMode: false,
icon: 'circle',
textStyle: {
color: '#ffffff',
fontSize: 14
},
formatter: legend.formatter
},
series: setSeries
}
this.jNestedRingChart.setOption(option)
}
},
watch: {
series() {
this.createChart()
}
}
}
</script>
<style>
.j-nested-ring-chart {
width: 100%;
height: 100%;
}
</style>

123
src/views/projectAdmin/common/jChart/pie/JProblemChart.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<!-- 质量问题 -->
<div class="myChart" ref="myChart" />
</template>
<script>
import echarts from "echarts4";
export default {
props: {
title: {
type: Object,
default: () => ({
text: "",
subTitle: "",
x: "48%",
y: "36%"
})
},
data: {
type: Array,
default: () => [{ value: 1, name: "" }]
},
color: {
type: Array,
default: () => ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"]
}
},
data() {
return {};
},
mounted() {
this.initMyChart();
},
methods: {
initMyChart() {
const myChart = echarts.init(this.$refs.myChart);
const option = {
title: {
x: this.title.x || "29%",
y: this.title.y || "43%",
show: true,
text: this.title.text,
subtext: this.title.subTitle,
textAlign: "center",
textStyle: {
fontSize: 20,
fontWeight: "normal",
color: "#fff"
},
subtextStyle: {
fontSize: 16,
fontWeight: "normal",
color: "#fff"
}
},
tooltip: {
trigger: "item"
},
legend: {
type: "scroll",
orient: "vertical",
right: 50,
top: "center",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
selectedMode: true,
icon: "circle",
textStyle: {
color: "#ffffff",
fontSize: 14
}
},
color: this.color,
series: [
{
type: "pie",
radius: ["30%", "25%"],
center: ["30%", "50%"],
labelLine: {
show: false
},
// x:'-20%',
color: ["#07162b", "#244e92", "#07162b", "#244e92"],
data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
},
{
type: "pie",
radius: ["50%", "65%"],
center: ["30%", "50%"],
avoidLabelOverlap: true,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: false,
fontSize: "20",
color: "#fff",
fontWeight: "bold"
},
scaleSize: 12
},
labelLine: {
show: false
},
data: this.data
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style lang="less" scoped>
.myChart {
width: 100%;
height: 100%;
}
</style>

114
src/views/projectAdmin/common/jChart/pie/JRingChart.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="j-ring-chart" ref="jRingChart"></div>
</template>
<script>
import echarts from 'echarts4'
export default {
props: {
data: {
type: Array,
default: () => [{ value: 1, name: '' }]
},
color: {
type: Array,
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
},
title: {
type: Object,
default: () => ({
text: '',
subTitle: '',
x: '48%',
y: '36%'
})
},
radius: {
type: Array,
default: () => ['65%', '80%']
}
},
mounted() {
this.createRingChart()
},
watch:{
data:{
handler(newVal,oldVal){
if(newVal != oldVal){
this.createRingChart();
}
},
deep:true,
immediate:true,
},
title:{
handler(newVal,oldVal){
if(newVal != oldVal){
this.createRingChart();
}
},
deep:true,
immediate:true,
}
},
methods: {
createRingChart() {
const jRingChart = echarts.init(this.$refs.jRingChart)
const { title } = this
const option = {
color: this.color,
title: {
show: true,
text: title.text,
x: title.x || '48%',
y: title.y || '36%',
z: 5,
textAlign: 'center',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 20
},
subtext: title.subTitle,
subtextStyle: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: 13
}
},
grid: {
right: 0
},
legend: {
show: false
},
series: [
{
name: '',
type: 'pie',
radius: this.radius,
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.data
}
]
}
console.log(option, '草')
jRingChart.setOption(option)
}
}
}
</script>
<style>
.j-ring-chart {
width: 100%;
height: 100%;
}
</style>

BIN
src/views/projectAdmin/zjsj/assets/images/sourse/bg-car-count.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

10
src/views/projectAdmin/zjsj/cim/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="cim"> <div class="cim">
<!-- <div class="between"> <div class="between">
<div class="top"> <div class="top">
<LeftTop /> <LeftTop />
</div> </div>
@ -16,7 +16,7 @@
<div class="bottom"> <div class="bottom">
<RightBottom /> <RightBottom />
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -37,8 +37,8 @@ export default {
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: url(../assets/temp/2.png) no-repeat; // background: url(../assets/temp/2.png) no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
.between { .between {
width: 20%; width: 20%;
height: 100%; height: 100%;
@ -52,7 +52,7 @@ export default {
.center { .center {
width: calc(60% - 40px); width: calc(60% - 40px);
height: 100%; height: 100%;
background: skyblue; border: 1px solid skyblue;
} }
} }
</style> </style>

21
src/views/projectAdmin/zjsj/cim/leftBottom.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<Card title="倾斜摄影"> <Card title="倾斜摄影">
倾斜摄影 <div class="videos">
<div class="video" v-for="i in 6" :key="i"></div>
</div>
</Card> </Card>
</template> </template>
@ -11,4 +13,19 @@ export default {
} }
</script> </script>
<style></style> <style lang="less" scoped>
.videos {
box-sizing: border-box;
padding-top: 10px;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.video {
width: 48%;
height: 30%;
border: 1px solid skyblue;
}
}
</style>

55
src/views/projectAdmin/zjsj/cim/leftTop.vue
View File

@ -1,14 +1,63 @@
<template> <template>
<Card title="BIM协同"> <Card title="BIM协同">
BIM协同 <div class="table">
<div class="row">
<div class="td">规划报批</div>
<div class="td">施工图审查</div>
<div class="td">竣工验收</div>
</div>
<div class="row" :class="{ warning: !row[0] }" v-for="(row, i) in list" :key="i">
<div class="td">{{ row[0] ? '符合' : '不符合' }}</div>
<div class="td">{{ row[1] ? '符合' : '不符合' }}</div>
<div class="td">{{ row[2] ? '已验收' : '未验收' }}</div>
</div>
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
export default { export default {
components: { Card } components: { Card },
data() {
const list = new Array(9).fill(0).map((item, index) => new Array(3).fill(0).map(() => (index === 3 ? 0 : 1)))
return {
list
}
},
methods: {}
} }
</script> </script>
<style></style> <style lang="less" scoped>
.table {
box-sizing: border-box;
padding: 20px 10px 0;
width: 100%;
height: 100%;
.row {
margin-bottom: 12px;
height: 22px;
line-height: 22px;
font-size: 12px;
display: flex;
.td {
flex: 1;
text-align: center;
}
&:nth-child(1) {
font-size: 14px;
color: #67d4d9;
}
&.warning {
background: linear-gradient(90deg, #a45133, #a4513338);
&::before {
content: '';
width: 4px;
height: 100%;
background-color: #e7622a;
}
}
}
}
</style>

74
src/views/projectAdmin/zjsj/cim/rightBottom.vue
View File

@ -1,14 +1,82 @@
<template> <template>
<Card title="模型外审"> <Card title="模型外审">
模型外审 <div class="chart">
<JNestedRingChart :title="{ text: '73', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
</div>
<div class="legend">
<div class="legend-item">未查看</div>
<div class="legend-item">已查看</div>
<div class="legend-item">已解决</div>
<div class="legend-item">已回复</div>
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
export default { export default {
components: { Card } components: { Card, JNestedRingChart },
data() {
return {
series: [
{
roseType: 'area',
radius: ['58%', '52%'],
color: ['#0B1B35', '#4A8C9C'],
data: [30, 40, 30, 40]
},
{
radius: ['65%', '82%'],
color: ['#FFFFFF', '#E86129', '#FFC303', '#6EE4F0'],
data: [
{ value: 11, name: '未查看' },
{ value: 11, name: '已查看' },
{ value: 11, name: '已解决' },
{ value: 11, name: '已回复' }
]
}
]
}
}
} }
</script> </script>
<style></style> <style lang="less" scoped>
.chart {
box-sizing: border-box;
padding-top: 20px;
height: 70%;
}
.legend {
margin-top: 30px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.legend-item {
width: 45%;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '';
margin-right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
}
&:nth-child(1)::before {
background-color: #ffffff;
}
&:nth-child(2)::before {
background-color: #e86129;
}
&:nth-child(3)::before {
background-color: #ffc303;
}
&:nth-child(4)::before {
background-color: #6ee4f0;
}
}
}
</style>

66
src/views/projectAdmin/zjsj/cim/rightTop.vue
View File

@ -1,14 +1,74 @@
<template> <template>
<Card title="模型内审"> <Card title="模型内审">
模型内审 <div class="chart">
<JNestedRingChart :title="{ text: '33', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
</div>
<div class="legend">
<div class="legend-item">未查看</div>
<div class="legend-item">未解决</div>
<div class="legend-item">已解决</div>
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
export default { export default {
components: { Card } components: { Card, JNestedRingChart },
data() {
return {
series: [
{
roseType: 'area',
radius: ['58%', '52%'],
color: ['#0B1B35', '#4A8C9C'],
data: [30, 40, 30, 40]
},
{
radius: ['65%', '82%'],
color: ['#E86129', '#FFC303', '#6EE4F0'],
data: [
{ value: 11, name: '未查看' },
{ value: 11, name: '未解决' },
{ value: 11, name: '已解决' }
]
}
]
}
}
} }
</script> </script>
<style></style> <style lang="less" scoped>
.chart {
box-sizing: border-box;
padding-top: 20px;
height: 70%;
}
.legend {
margin-top: 30px;
display: flex;
justify-content: space-around;
.legend-item {
display: flex;
align-items: center;
&::before {
content: '';
margin-right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
}
&:nth-child(1)::before {
background-color: #e86129;
}
&:nth-child(2)::before {
background-color: #ffc303;
}
&:nth-child(3)::before {
background-color: #6ee4f0;
}
}
}
</style>

60
src/views/projectAdmin/zjsj/progress/index.vue
View File

@ -6,14 +6,34 @@
<TopRight /> <TopRight />
</div> </div>
</div> </div>
<div class="bottom"></div> <div class="bottom">
<div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
<div class="date">{{ v.date }}</div>
<div class="name">{{ v.name }}</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import TopRight from './topRight.vue' import TopRight from './topRight.vue'
export default { export default {
components: { TopRight } components: { TopRight },
data() {
return {
progress: [
{ name: '基础工程', date: '2022-02-02' },
{ name: '主体结构施工', date: '2022-02-02' },
{ name: '屋面工程', date: '2022-02-02' },
{ name: '机械设备安拆工程', date: '2022-02-02' },
{ name: '室内装饰装修工程', date: '2022-02-02' },
{ name: '室内装饰装修工程', date: '2022-02-02' },
{ name: '室内装饰装修工程', date: '2022-02-02' },
{ name: '室内装饰装修工程', date: '2022-02-02' },
{ name: '室内装饰装修工程', date: '2022-02-02' }
]
}
}
} }
</script> </script>
@ -39,7 +59,41 @@ export default {
} }
.bottom { .bottom {
height: 26%; height: 26%;
border: 1px solid skyblue; color: #fff;
display: flex;
align-items: center;
.progress-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
&::before {
content: '';
width: 8px;
height: 8px;
background-color: #fff;
border: 1px solid #2de1fa;
border-radius: 50%;
}
&:not(:last-child)::after {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% - 5px);
width: 100%;
height: 1px;
background-color: #ccc;
}
&.success::after {
background-color: #2de1fa;
}
.date {
margin: 4px 0;
font-size: 12px;
color: #ddd;
}
}
} }
} }
</style> </style>

75
src/views/projectAdmin/zjsj/progress/topRight.vue
View File

@ -1,14 +1,83 @@
<template> <template>
<Card title="进度任务"> <Card title="进度任务">
进度任务 <div class="tabs">
<div class="tab checked">待办事项</div>
<div class="tab">未来提醒</div>
</div>
<div class="list">
<vue-scroll>
<div class="list-item" v-for="(v, i) in todos" :key="i">
<div class="todo">{{ v.todo }}</div>
<div class="startTime">
<span class="grey">计划开始时间：</span><span class="blue">{{ v.startTime }}</span>
</div>
<div class="endTime">
<span class="grey">计划结束时间：</span><span class="blue">{{ v.endTime }}</span>
</div>
<div class="delay orange">已延期{{ v.delay }}天</div>
</div>
</vue-scroll>
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
export default { export default {
components: { Card } components: { Card },
data() {
return {
todos: [
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 }
]
}
}
} }
</script> </script>
<style></style> <style lang="less" scoped>
.tabs {
display: flex;
color: #fff;
.tab {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
&.checked {
color: #2de1fa;
}
}
}
.list {
padding-left: 20px;
height: calc(100% - 40px);
color: #fff;
.list-item {
&:not(:last-child) {
margin-bottom: 30px;
}
div {
&:not(:first-child) {
font-size: 12px;
margin-top: 6px;
}
}
}
}
.grey {
color: #ccc;
}
.blue {
color: #2de1fa;
}
.orange {
color: #f56c36;
}
</style>

59
src/views/projectAdmin/zjsj/sourse/components/CarTable.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="table">
<div class="thead">
<div class="row">
<div>抓拍照片</div>
<div>车辆信息</div>
<div>抓拍时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 9" :key="i">
<div><img src="" /></div>
<div class="carNum">粤A455632</div>
<div class="datetime">2011-02-03 15:30</div>
</div>
</vue-scroll>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.table {
width: 100%;
height: 100%;
.thead {
padding-bottom: 12px;
color: #59b2c0;
}
.tbody {
height: calc(100% - 30px);
}
.row {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 12px;
}
div {
text-align: center;
&:last-child {
width: 160px;
}
&:not(:last-child) {
flex: 1;
}
img {
width: 80px;
height: 50px;
background: skyblue;
}
}
}
}
</style>

73
src/views/projectAdmin/zjsj/sourse/components/MaterialTable.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div class="material-table">
<div class="title">物料进场</div>
<div class="table">
<div class="thead">
<div class="row">
<div>物料类型</div>
<div>重量(KG)</div>
<div>时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 9" :key="i">
<div>水泥</div>
<div>35</div>
<div>2011-02-03 15:30</div>
</div>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.material-table {
width: 100%;
height: 100%;
.title {
height: 50px;
line-height: 40px;
font-size: 20px;
color: #6de3ef;
text-align: center;
}
.table {
width: 100%;
height: calc(100% - 50px);
.thead {
padding-bottom: 12px;
color: #59b2c0;
}
.tbody {
height: calc(100% - 30px);
}
.row {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 12px;
}
div {
text-align: center;
&:last-child {
width: 160px;
}
&:not(:last-child) {
flex: 1;
}
img {
width: 80px;
height: 50px;
background: skyblue;
}
}
}
}
}
</style>

8
src/views/projectAdmin/zjsj/sourse/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="sourse"> <div class="sourse">
<!-- <div class="left"> <div class="left">
<div class="top"> <div class="top">
<LeftTop /> <LeftTop />
</div> </div>
@ -15,7 +15,7 @@
<div class="bottom"> <div class="bottom">
<RightBottom /> <RightBottom />
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -36,8 +36,8 @@ export default {
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: url(../assets/temp/3.png) no-repeat; // background: url(../assets/temp/3.png) no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
.left { .left {
width: 22%; width: 22%;
height: 100%; height: 100%;

15
src/views/projectAdmin/zjsj/sourse/leftBottom.vue
View File

@ -1,14 +1,23 @@
<template> <template>
<Card title="车辆冲洗抓拍"> <Card title="车辆冲洗抓拍">
车辆冲洗抓拍 <div class="list">
<CarTable />
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import CarTable from './components/CarTable.vue'
export default { export default {
components: { Card } components: { Card, CarTable }
} }
</script> </script>
<style></style> <style lang="less" scoped>
.list {
box-sizing: border-box;
padding-top: 20px;
height: 100%;
}
</style>

42
src/views/projectAdmin/zjsj/sourse/leftTop.vue
View File

@ -1,14 +1,50 @@
<template> <template>
<Card title="车辆管理"> <Card title="车辆管理">
车辆管理 <div class="car-count">
今日入场<span>234</span>辆
</div>
<div class="car-count">
今日出场<span>126</span>辆
</div>
<div class="list">
<CarTable />
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import CarTable from './components/CarTable.vue'
export default { export default {
components: { Card } components: { Card, CarTable }
} }
</script> </script>
<style></style> <style lang="less" scoped>
.car-count {
padding-top: 10px;
padding-left: 30px;
font-size: 18px;
color: #59b2c0;
display: flex;
align-items: center;
span {
margin-left: 40px;
margin-right: 20px;
width: 140px;
height: 50px;
line-height: 60px;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #fff;
background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
background-size: 100% 100%;
}
}
.list {
box-sizing: border-box;
padding-top: 20px;
height: calc(100% - 120px);
}
</style>

20
src/views/projectAdmin/zjsj/sourse/rightBottom.vue
View File

@ -1,14 +1,28 @@
<template> <template>
<Card title="检查统计"> <Card title="检查统计">
检查统计 <div class="list-group">
<div class="list"><MaterialTable title="物料进场" /></div>
<div class="list"><MaterialTable title="物料出场" /></div>
<div class="list"><MaterialTable title="材料检验" /></div>
</div>
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import MaterialTable from './components/MaterialTable.vue'
export default { export default {
components: { Card } components: { Card, MaterialTable }
} }
</script> </script>
<style></style> <style lang="less" scoped>
.list-group {
height: 100%;
display: flex;
justify-content: space-around;
.list {
width: 28%;
}
}
</style>

33
src/views/projectAdmin/zjsj/sourse/rightTop.vue
View File

@ -1,13 +1,42 @@
<template> <template>
<Card title="隐患趋势"> <Card title="隐患趋势">
隐患趋势 <JBarChart :tooltip="{}" :xData="xData" :series="series" />
</Card> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
import JBarChart from '../../common/jChart/bar/JBarChart.vue'
import echarts from 'echarts4'
export default { export default {
components: { Card } components: { Card, JBarChart },
data() {
return {
xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
series: [
{
name: '计划用料',
data: [23, 44, 63, 12, 45, 78, 34, 67, 32, 44, 13, 75],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6de1ee' },
{ offset: 1, color: '#6de1ee24' }
])
}
},
{
name: '实际用料',
data: [44, 13, 86, 24, 43, 78, 12, 32, 45, 82, 21, 76],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#DE5F2A' },
{ offset: 1, color: '#DE5F2A24' }
])
}
}
]
}
}
} }
</script> </script>