中建四局(指挥中心)：完成项目信息、人员情况的布局和样式
This commit is contained in:
Luck-Xiaomi
parent
3b1edfa952
commit
cce0b81dc3
@ -1,64 +1,76 @@
|
||||
<template>
|
||||
<div class="containerBox">
|
||||
<!-- <div class="leftBox">
|
||||
<div class="leftBox">
|
||||
<div class="leftOne">
|
||||
<leftOne></leftOne>
|
||||
<LeftOne />
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<leftTwo></leftTwo>
|
||||
<LeftTwo />
|
||||
</div>
|
||||
<div class="leftThree">
|
||||
<leftThree></leftThree>
|
||||
<LeftThree />
|
||||
</div>
|
||||
<div class="leftFour">
|
||||
<leftFour></leftFour>
|
||||
<LeftFour />
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerBox">
|
||||
<div class="centerTop">
|
||||
<center></center>
|
||||
<Center />
|
||||
</div>
|
||||
<div class="centerBot">
|
||||
<div class="one">
|
||||
<centerBOne></centerBOne>
|
||||
<CenterBOne />
|
||||
</div>
|
||||
<div class="two">
|
||||
<centerBTwo></centerBTwo>
|
||||
<CenterBTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<div class="rightOne">
|
||||
<rightOne></rightOne>
|
||||
<RightOne />
|
||||
</div>
|
||||
<div class="rightTwo">
|
||||
<rightTwo></rightTwo>
|
||||
<RightTwo />
|
||||
</div>
|
||||
<div class="rightThree">
|
||||
<rightThree></rightThree>
|
||||
<RightThree />
|
||||
</div>
|
||||
<div class="rightFour">
|
||||
<rightFour></rightFour>
|
||||
<RightFour />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import leftOne from './leftOne'
|
||||
import leftTwo from './leftTwo'
|
||||
import leftThree from './leftThree'
|
||||
import leftFour from './leftFour'
|
||||
import center from './center'
|
||||
import centerBOne from './centerBOne'
|
||||
import centerBTwo from './centerBTwo'
|
||||
import rightOne from './rightOne'
|
||||
import rightTwo from './rightTwo'
|
||||
import rightThree from './rightThree'
|
||||
import rightFour from './rightFour'
|
||||
import LeftOne from './LeftOne'
|
||||
import LeftTwo from './LeftTwo'
|
||||
import LeftThree from './LeftThree'
|
||||
import LeftFour from './LeftFour'
|
||||
import Center from './Center'
|
||||
import CenterBOne from './CenterBOne'
|
||||
import CenterBTwo from './CenterBTwo'
|
||||
import RightOne from './RightOne'
|
||||
import RightTwo from './RightTwo'
|
||||
import RightThree from './RightThree'
|
||||
import RightFour from './RightFour'
|
||||
|
||||
export default {
|
||||
components: { leftOne, leftTwo, leftThree, leftFour, center, centerBOne, centerBTwo, rightOne, rightTwo, rightThree, rightFour },
|
||||
components: {
|
||||
LeftOne,
|
||||
LeftTwo,
|
||||
LeftThree,
|
||||
LeftFour,
|
||||
Center,
|
||||
CenterBOne,
|
||||
CenterBTwo,
|
||||
RightOne,
|
||||
RightTwo,
|
||||
RightThree,
|
||||
RightFour
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
@ -70,7 +82,7 @@ export default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/temp/1.png) no-repeat;
|
||||
// background: url(../assets/temp/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.leftBox {
|
||||
width: 25%;
|
||||
@ -97,7 +109,6 @@ export default {
|
||||
display: flex;
|
||||
.one {
|
||||
width: 100%;
|
||||
// margin-left: 10%;
|
||||
}
|
||||
.two {
|
||||
width: 100%;
|
||||
|
||||
@ -1,21 +1,368 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card title="设备管理">
|
||||
<div class="contentBox">
|
||||
123
|
||||
<Card title="设备管理">
|
||||
<div class="container">
|
||||
<div class="item" ref="firstChart"></div>
|
||||
<div class="item" ref="secondChart"></div>
|
||||
<div class="item" ref="thirdChart"></div>
|
||||
<div class="first-box box">
|
||||
<div class="box-title">塔吊设备数</div>
|
||||
<img class="image" src="" alt="">
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
|
||||
import Card from '../components/Card'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart('firstChart')
|
||||
this.initChart('secondChart')
|
||||
this.initChart('thirdChart')
|
||||
},
|
||||
methods: {
|
||||
initChart(ref) {
|
||||
const myChart = echarts.init(this.$refs[ref])
|
||||
|
||||
let angle = 0 //角度，用来做简单的动画效果的
|
||||
let value = 7
|
||||
const option = {
|
||||
// backgroundColor: '#061740',
|
||||
title: {
|
||||
text: value,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
top: '35%',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#e5e442'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((0 + angle) * Math.PI) / 180,
|
||||
endAngle: ((90 + angle) * Math.PI) / 180
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((180 + angle) * Math.PI) / 180,
|
||||
endAngle: ((270 + angle) * Math.PI) / 180
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((270 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((40 + -angle) * Math.PI) / 180
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((90 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((220 + -angle) * Math.PI) / 180
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 2
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 90 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 2
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB', // 粉
|
||||
fill: '#0CD3DB'
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: 'ring5', // 绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 2
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 270 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 2
|
||||
},
|
||||
style: {
|
||||
stroke: '#0CD3DB', // 绿
|
||||
fill: '#0CD3DB'
|
||||
},
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '吃猪肉频率',
|
||||
type: 'pie',
|
||||
radius: ['56%', '45%'],
|
||||
center: ['50%', '50%'],
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
// 完成的圆环的颜色
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#4FADFD' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28E8FA' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - value,
|
||||
name: '',
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#173164'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '',
|
||||
type: 'gauge',
|
||||
radius: '58%',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 0,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 8,
|
||||
hoverAnimation: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
length: 60,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
// 分隔线的颜色
|
||||
color: '#182337'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
function getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
||||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
angle = angle + 3
|
||||
myChart.setOption(option, true)
|
||||
//window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
//用setInterval做动画感觉有问题
|
||||
draw()
|
||||
}, 100)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
transform: translateY(-20px);
|
||||
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(100% / 2);
|
||||
height: 100%;
|
||||
color: transparent;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translateX(-20%);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: translateX(-47%);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
.box-title {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.first-box {
|
||||
bottom: 30%;
|
||||
left: 8%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card title="项目信息">
|
||||
<div class="contentBox">
|
||||
<div class="box">
|
||||
<span>项目位置</span>
|
||||
<span>建宁路与热河交叉路口</span>
|
||||
<Card title="项目信息">
|
||||
<div class="container">
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
data: () => ({
|
||||
list: [
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
{ name: '项目位置', content: '测试测试测试测试' },
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-image: url('~@/assets/images/projectZjsj/intro.png');
|
||||
background-size: 100%;
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
box-sizing: border-box;
|
||||
border-left: 4px solid #66d3d8;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 30px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right , #3b7589, #212c3e);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&:hover .value {
|
||||
color: #c2805f;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card title="人员概况">
|
||||
<div class="contentBox">
|
||||
123
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Card title="人员概况">
|
||||
<div class="container" ref="chart"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
|
||||
import Card from '../components/Card'
|
||||
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const myChart = echarts.init(this.$refs.chart)
|
||||
const option = {
|
||||
grid: {
|
||||
top: '20px',
|
||||
left: '30px',
|
||||
right: '20px',
|
||||
bottom: '40px'
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: true,
|
||||
type: 'category',
|
||||
data: ['总人数', '实名制人数', '劳务人数', '出勤人数', '退场人数'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
show: true,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#4a6290'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
show: true,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '报警',
|
||||
data: [150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
barWidth: '25%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#fb6e34'
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
color: '#252d3f'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -159,4 +159,13 @@ export default {
|
||||
height: calc(100% - 110px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局滚动条样式 */
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 0 !important;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 8 !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user