mirror of https://gitee.com/pnoker/dc3-web.git
pull/1/head
pnoker
7 years ago
parent
a48cc614d4
commit
a55ec3e56e
@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<div slot="header">
|
||||||
|
<span>{{title}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "title-card",
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.card {
|
||||||
|
padding: 8px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
<base-card>
|
|
||||||
<p>
|
|
||||||
Welcome to Your Vue.js App
|
|
||||||
</p>
|
|
||||||
</base-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -0,0 +1,203 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-col :span="9">
|
||||||
|
<title-card title="设备在线统计">
|
||||||
|
<div id="c1"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<title-card title="设备状态统计">
|
||||||
|
<div id="c2"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="9">
|
||||||
|
<title-card title="设备分组统计">
|
||||||
|
<div id="c3"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<div id="device-map"/>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {PointLayer, Scene} from '@antv/l7';
|
||||||
|
import {GaodeMap} from '@antv/l7-maps';
|
||||||
|
import G2 from '@antv/g2';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const data1 = [
|
||||||
|
{year: '1991', value: 3},
|
||||||
|
{year: '1992', value: 4},
|
||||||
|
{year: '1993', value: 3.5},
|
||||||
|
{year: '1994', value: 5},
|
||||||
|
{year: '1995', value: 4.9},
|
||||||
|
{year: '1996', value: 6},
|
||||||
|
{year: '1997', value: 7},
|
||||||
|
{year: '1998', value: 9},
|
||||||
|
{year: '1999', value: 13}
|
||||||
|
];
|
||||||
|
const chart1 = new G2.Chart({
|
||||||
|
container: 'c1',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart1.source(data1);
|
||||||
|
chart1.scale('value', {
|
||||||
|
min: 0
|
||||||
|
});
|
||||||
|
chart1.scale('year', {
|
||||||
|
range: [0, 1]
|
||||||
|
});
|
||||||
|
chart1.tooltip({
|
||||||
|
crosshairs: {
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart1.line().position('year*value');
|
||||||
|
chart1.point().position('year*value')
|
||||||
|
.size(4)
|
||||||
|
.shape('circle')
|
||||||
|
.style({
|
||||||
|
stroke: '#fff',
|
||||||
|
lineWidth: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
chart1.render();
|
||||||
|
|
||||||
|
const data2 = [
|
||||||
|
{item: '事例一', count: 40, percent: 0.4},
|
||||||
|
{item: '事例二', count: 21, percent: 0.21},
|
||||||
|
{item: '事例三', count: 17, percent: 0.17},
|
||||||
|
{item: '事例四', count: 13, percent: 0.13},
|
||||||
|
{item: '事例五', count: 9, percent: 0.09}
|
||||||
|
];
|
||||||
|
const chart2 = new G2.Chart({
|
||||||
|
container: 'c2',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart2.source(data2, {
|
||||||
|
percent: {
|
||||||
|
formatter: val => {
|
||||||
|
val = (val * 100) + '%';
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart2.coord('theta', {
|
||||||
|
radius: 0.75
|
||||||
|
});
|
||||||
|
chart2.tooltip({
|
||||||
|
showTitle: false,
|
||||||
|
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
||||||
|
});
|
||||||
|
chart2.intervalStack()
|
||||||
|
.position('percent')
|
||||||
|
.color('item')
|
||||||
|
.label('percent', {
|
||||||
|
formatter: (val, item) => {
|
||||||
|
return item.point.item + ': ' + val;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.tooltip('item*percent', (item, percent) => {
|
||||||
|
percent = percent * 100 + '%';
|
||||||
|
return {
|
||||||
|
name: item,
|
||||||
|
value: percent
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.style({
|
||||||
|
lineWidth: 1,
|
||||||
|
stroke: '#fff'
|
||||||
|
});
|
||||||
|
chart2.render();
|
||||||
|
|
||||||
|
const data3 = [
|
||||||
|
{year: '1951 年', sales: 38},
|
||||||
|
{year: '1952 年', sales: 52},
|
||||||
|
{year: '1956 年', sales: 61},
|
||||||
|
{year: '1957 年', sales: 145},
|
||||||
|
{year: '1958 年', sales: 48},
|
||||||
|
{year: '1959 年', sales: 38},
|
||||||
|
{year: '1960 年', sales: 38},
|
||||||
|
{year: '1962 年', sales: 38}
|
||||||
|
];
|
||||||
|
const chart3 = new G2.Chart({
|
||||||
|
container: 'c3',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart3.source(data3);
|
||||||
|
chart3.scale('sales', {
|
||||||
|
tickInterval: 20
|
||||||
|
});
|
||||||
|
chart3.interval().position('year*sales');
|
||||||
|
chart3.render();
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'device-map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
pitch: 0,
|
||||||
|
style: 'light',
|
||||||
|
center: [121.410765, 31.256735],
|
||||||
|
zoom: 14.83
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
scene.addImage(
|
||||||
|
'00',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||||
|
);
|
||||||
|
scene.addImage(
|
||||||
|
'01',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||||
|
);
|
||||||
|
scene.addImage(
|
||||||
|
'02',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||||
|
);
|
||||||
|
const imageLayer = new PointLayer()
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'longitude',
|
||||||
|
y: 'latitude'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.shape('name', ['00', '01', '02'])
|
||||||
|
.size(20);
|
||||||
|
scene.addLayer(imageLayer);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.home:first-child {
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#device-map {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue