Merge branch 'shenzhen-dev' of http://10.0.0.60/dhp/zhgdyun into shenzhen-dev
This commit is contained in:
骆乐
commit
b73986fd8f
@ -16,7 +16,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -75,5 +77,8 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 84px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
|
||||
hello
|
||||
<div class="list">
|
||||
<div class="list-head">设备名称</div>
|
||||
<div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
|
||||
<div class="label">1号塔吊</div>
|
||||
<div class="status">在线</div>
|
||||
</div>
|
||||
</div>
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
</template>
|
||||
@ -23,4 +29,46 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
.list-head {
|
||||
margin-bottom: 6px;
|
||||
padding-left: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.list-item {
|
||||
margin-bottom: 6px;
|
||||
padding: 0 16px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.online {
|
||||
background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
|
||||
.status {
|
||||
background-color: #3cabfd;
|
||||
}
|
||||
}
|
||||
&.offline {
|
||||
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
|
||||
.status {
|
||||
background-color: #ff6c7f;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
margin-right: 6px;
|
||||
width: 36px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.label {
|
||||
margin-right: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
|
||||
hello
|
||||
<JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
</template>
|
||||
@ -9,8 +9,9 @@
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import DeviceCard from './components/DeviceCard.vue'
|
||||
import JBarChart from '../jChart/bar/JBarChart.vue'
|
||||
export default {
|
||||
components: { Card, DeviceCard },
|
||||
components: { Card, DeviceCard, JBarChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -18,7 +19,25 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
const yData = [23, 44, 63, 12, 45, 78, 34, 67].map((value, i) => {
|
||||
if (i > 4 && i < 7) {
|
||||
return {
|
||||
name: '离线',
|
||||
value,
|
||||
itemStyle: { color: '#FF6C7F' }
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
name: '报警数',
|
||||
value,
|
||||
itemStyle: { color: '#3CABFD' }
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
xData: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
|
||||
yData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,19 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
|
||||
hello
|
||||
<div class="list">
|
||||
<div class="list-head">
|
||||
<div class="device">设备名称</div>
|
||||
<div class="enter">进场人数</div>
|
||||
<div class="outer">出场人数</div>
|
||||
</div>
|
||||
<div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
|
||||
<div class="status">在线</div>
|
||||
<div class="label">1号塔吊</div>
|
||||
<div class="enter">66</div>
|
||||
<div class="outer">99</div>
|
||||
</div>
|
||||
</div>
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
</template>
|
||||
@ -23,4 +35,65 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
.list-head {
|
||||
margin-bottom: 6px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
.device {
|
||||
margin-left: 56px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.enter {
|
||||
width: 70px;
|
||||
}
|
||||
.outer {
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.list-item {
|
||||
margin-bottom: 6px;
|
||||
padding: 0 16px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.online {
|
||||
background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
|
||||
.status {
|
||||
background-color: #3cabfd;
|
||||
}
|
||||
}
|
||||
&.offline {
|
||||
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
|
||||
.status {
|
||||
background-color: #ff6c7f;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
margin-right: 20px;
|
||||
width: 36px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.label {
|
||||
margin-right: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.enter {
|
||||
width: 70px;
|
||||
}
|
||||
.outer {
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<DeviceCard :leftCount="{ value: 22, label: '升降机设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
|
||||
hello
|
||||
<DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
|
||||
<JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
|
||||
</DeviceCard>
|
||||
</Card>
|
||||
</template>
|
||||
@ -9,8 +9,9 @@
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import DeviceCard from './components/DeviceCard.vue'
|
||||
import JBarChart from '../jChart/bar/JBarChart.vue'
|
||||
export default {
|
||||
components: { Card, DeviceCard },
|
||||
components: { Card, DeviceCard, JBarChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -18,7 +19,25 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
const yData = [23, 44, 63, 12, 45, 78, 34, 67].map((value, i) => {
|
||||
if (i > 4 && i < 7) {
|
||||
return {
|
||||
name: '离线',
|
||||
value,
|
||||
itemStyle: { color: '#FF6C7F' }
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
name: '报警数',
|
||||
value,
|
||||
itemStyle: { color: '#3CABFD' }
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
xData: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
|
||||
yData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -12,6 +12,10 @@ export default {
|
||||
text: ''
|
||||
})
|
||||
},
|
||||
tooltip: {
|
||||
type: Object,
|
||||
default: () => ({ show: false })
|
||||
},
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['15%', '2%', '2%', '2%']
|
||||
@ -43,7 +47,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, grid, color, xData, yData, series } = this
|
||||
const { title, tooltip, grid, color, xData, yData, series } = this
|
||||
const configSeries = (series => {
|
||||
if (series.length) {
|
||||
return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
|
||||
@ -62,6 +66,7 @@ export default {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip,
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user