Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
242cd2e2 by 任超
Options

style:首页完成

1 parent e1f0d80d
Expand all
Inline Side-by-side
Showing 18 changed files with 350 additions and 352 deletions
<template>
<div>
<Chart :cdata="cdata"/>
</div>
<Chart :cdata="cdata" />
</template>
<script>
......@@ -10,99 +8,84 @@ export default {
data () {
return {
cdata: {
legendItem :['接入','上报','登簿'],
color : [
"#0090FF",
"#EE8931",
"#8B5CFF"
],
echartData :[{
name: "2017-11",
value1: 1351,
value2: 600,
value3: 568,
},
{
name: "2017-11",
value1: 980,
value2: 1245,
value3: 1100,
},
{
name: "2017-11",
value1: 1127,
value2: 398,
value3: 568,
},
{
name: "2017-11",
value1: 1046,
value2: 689,
value3: 479
},
{
name: "2018-02",
value1: 780,
value2: 396,
value3: 655
},
{
name: "2018-08",
value1: 359,
value2: 1220,
value3: 540,
},
{
name: "2018-07",
value1: 229,
value2: 836,
value3: 1234,
},
{
name: "2018-09",
value1: 1176,
value2: 478,
value3: 755,
},
{
name: "2018-11",
value1: 515,
value2: 911,
value3: 806,
},
{
name: "2019-01",
value1: 658,
value2: 979,
value3: 813,
},
{
name: "2019-03",
value1: 364,
value2: 839,
value3: 886,
},
{
name: "2019-05",
value1: 973,
value2: 816,
value3: 791,
}
legendItem: ['接入', '上报', '登簿'],
color: [
"#5324DA",
"#E873B2",
"#F4AF6F "
],
echartData: [{
name: "2017-11",
value1: 1351,
value2: 600,
value3: 568,
},
{
name: "2017-11",
value1: 980,
value2: 1245,
value3: 1100,
},
{
name: "2017-11",
value1: 1127,
value2: 398,
value3: 568,
},
{
name: "2017-11",
value1: 1046,
value2: 689,
value3: 479
},
{
name: "2018-02",
value1: 780,
value2: 396,
value3: 655
},
{
name: "2018-08",
value1: 359,
value2: 1220,
value3: 540,
},
{
name: "2018-07",
value1: 229,
value2: 836,
value3: 1234,
},
{
name: "2018-09",
value1: 1176,
value2: 478,
value3: 755,
},
{
name: "2018-11",
value1: 515,
value2: 911,
value3: 806,
},
{
name: "2019-01",
value1: 658,
value2: 979,
value3: 813,
},
{
name: "2019-03",
value1: 364,
value2: 839,
value3: 886,
},
]
}
};
}
},
components: {
Chart,
},
mounted () {
},
methods: {
Chart
}
};
</script>
<style lang="scss" scoped></style>
}
</script>
\ No newline at end of file
......
<template>
<div>
<Echart :options="options" id="centreLeft1Chart" height="220px" width="100%"></Echart>
</div>
<Echart :options="options" id="centreLeft1Chart" height="200px" width="95%"></Echart>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
......@@ -27,9 +19,8 @@ export default {
this.options = {
grid: {
// 让图表占满容器
top: "0%",
left: "10%",
right: "40%",
top: "50%",
right: '30%',
bottom: "0%",
},
color: [
......@@ -50,7 +41,6 @@ export default {
show: true
},
calculable: true,
series: [
{
name: "业务量",
......@@ -70,5 +60,7 @@ export default {
</script>
<style lang="scss" scoped>
#centreLeft1Chart {
margin-left: -20px;
}
</style>
......
......@@ -52,5 +52,7 @@ export default {
text-align: center;
border-radius: 6px;
font-weight: 600;
color: #02D9FD;
margin-top: 20px;
}
</style>
......
<template>
<div>
<!-- 柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="300px"
width="100%"
></Echart>
</div>
<!-- 柱状图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
data () {
return {
options: {},
};
......@@ -29,102 +22,102 @@ export default {
},
watch: {
cdata: {
handler(newData) {
this.options ={
grid: {
// 让图表占满容器
top: "12%",
left: "15%",
right: "10%",
bottom: "26%",
},
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "12%",
left: "15%",
right: "10%",
bottom: "26%",
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
},
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
},
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
yAxis: {
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
{
barWidth: 15,
animation: false,
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
{
barWidth: 15,
animation: false,
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
},
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
},
data: newData.lineData,
},
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
},
data: newData.lineData,
},
],
}
],
}
},
immediate: true,
deep: true,
......
<template>
<div>
<Chart :cdata="cdata" />
</div>
<Chart :cdata="cdata" />
</template>
<script>
......@@ -32,7 +30,7 @@ export default {
9045,
8348,
20008,
],
],
}
};
},
......@@ -48,4 +46,5 @@ export default {
</script>
<style lang="scss" scoped>
</style>
......
<template>
<div>
<!-- 地图 -->
<Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px"
:options="options"></Echart>
</div>
<!-- 地图 -->
<Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="470px"
:options="options"></Echart>
</template>
<script>
......@@ -111,8 +109,8 @@ export default {
visualMap: {
min: 0,
max: _this.max,
top: "bottom",
right: 10,
bottom: '2%',
right: 30,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
......@@ -133,7 +131,7 @@ export default {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: '汉中市', // 自定义扩展图表类型
top: '20%',
top: '15%',
left: '10%',
itemStyle: {
normal: {
......
<template>
<div>
<Chart :cdata="cdata" />
</div>
<Chart :cdata="cdata" />
</template>
<script>
......
<template>
<template>
<div class="centercard">
<div class="card1 bg-shadow">
<div class="card1">
<div class="title">陕西省不动产接入信息</div>
<maps class="map" />
</div>
<div class="card2 bg-shadow">
<Brokenline class="Brokenline" />
<div class="card2 mt-10">
<div class="title">数据趋势</div>
<brokenline class="Brokenline" />
</div>
</div>
</template>
<script>
import maps from "@/components/echart/map";
import Brokenline from "@/components/echart/Brokenline";
import brokenline from "@/components/echart/brokenline";
export default {
data () {
return {};
},
components: { maps, Brokenline },
components: { maps, brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
......@@ -26,26 +28,60 @@ export default {
<style lang="scss" scoped>
.centercard {
width: 48%;
height: 100%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 10px;
display: flex;
flex-direction: column;
.card1 {
width: 100%;
height: 600px;
background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 470px;
.map {
margin: auto;
width: 95%;
height: 600px;
.title {
position: absolute;
font-weight: bold;
color: #02D9FD;
line-height: 26px;
font-size: 22px;
position: absolute;
left: 0;
right: 0;
top: 9px;
text-align: right;
padding-right: 15%;
}
}
.card2 {
width: 100%;
background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
height: 100%;
width: 100%;
.title {
position: absolute;
font-weight: bold;
color: #02D9FD;
line-height: 26px;
font-size: 22px;
position: absolute;
left: 0;
right: 0;
top: 9px;
text-align: center;
margin-bottom: 10px;
}
.Brokenline {
margin: auto;
width: 100%;
height: 300px;
}
}
}
......
......@@ -5,18 +5,18 @@
<div class="cardcontent">
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p>
<p v-for="(item, index) in rjjrlList" class="d-center qxjr" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span>0</span>
<span class="bad">0</span>
</p>
<p>
<span>成功率</span>
<span>99%</span>
<span class="cg">99%</span>
</p>
</div>
</div>
......@@ -26,18 +26,18 @@
<div class="cardcontent">
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p>
<p v-for="(item, index) in rjjrlList" class="d-center sthj" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span>0</span>
<span class="bad">0</span>
</p>
<p>
<span>成功率</span>
<span>99%</span>
<span class="cg">99%</span>
</p>
</div>
</div>
......@@ -78,17 +78,22 @@ export default {
.leftcard {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
.card {
background: url("~@/image/homeLeftBg.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
height: 100%;
padding: 8px 0;
}
.card1 {
background: url("~@/image/qxsj.png") no-repeat;
background-size: 100% 100%;
position: relative;
padding: 10px 0;
}
.cardhead {
......@@ -107,25 +112,33 @@ export default {
.rjjrlList {
display: flex;
margin-top: 15px;
p {
.qxjr {
background: url('~@/image/jrl3.png');
}
.sthj {
background: url('~@/image/jh.png');
}
p {
margin: 0 3px 10px 3px;
font-weight: 700;
width: 24px;
height: 36px;
font-size: 30px;
font-size: 30px;
font-size: 32px;
}
}
.cardcontent {
width: 100%;
height: 160px;
height: 100%;
display: flex;
padding: 35px 20px 20px 20px;
box-sizing: border-box;
color: #FFFFFF;
color: #E3F1FF;
.cardcontent-left {
width: 60%;
......@@ -147,9 +160,28 @@ export default {
flex: 1;
width: 100%;
flex-direction: column;
font-size: 16px;
.bad {
color: #C97168;
}
.cg {
color: #5FBA7D;
}
p {
margin-bottom: 8px;
span:nth-child(1) {
margin-right: 15px;
}
span:nth-child(2) {
font-size: 20px;
font-weight: 900;
p:nth-child(1) {
span:nth-child(1) {}
}
}
}
}
......
<template>
<div class="rightcard">
<div class="card bg-shadow">
<div class="card1 cardCon d-center">
<div class="cardhead">房屋情况统计表</div>
<div class="cardcontent">
<el-table class="bueatyScroll"
:header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
:cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
ref="tableref" height="250px" style="width: 100%">
<el-table-column type="index" label="序号" />
<el-table-column prop="use" label="用途" />
<el-table-column prop="property" label="性质" />
<el-table-column prop="area" label="面积" />
</el-table>
<div class="cardcontent" style="margin-top: 50px">
<dv-scroll-board :config="config" class="board" />
</div>
</div>
<div class="card bg-shadow">
<div class="card2 cardCon mt-10">
<div class="cardhead">登记业务量</div>
<Rose />
</div>
<div class="card bg-shadow">
<div class="card3 cardCon mt-10">
<div class="cardhead">登记类型总量</div>
<columnarsmat />
</div>
......@@ -31,114 +23,88 @@ import Rose from "@/components/echart/Rose";
export default {
data () {
return {
tableData: [{
use: '居住',
property: '住宅',
area: '120'
}, {
use: '水果店',
property: '商铺',
area: '342'
}, {
use: '商场',
property: '商业',
area: '2343'
}, {
use: '耕地',
property: '农田',
area: '29987'
}, {
use: '林场',
property: '林地',
area: '67894'
}, {
use: '旅游',
property: '旅游区',
area: '22328'
}, {
use: '政府',
property: '建筑用地',
area: '1228'
}, {
use: '学校',
property: '建筑用地',
area: '2328'
}, {
use: '采矿',
property: '矿场',
area: '2328'
}]
};
config: {
headerBGC: '#016AC5',
oddRowBGC: '#154295',
evenRowBGC: '#154295',
header: ['序号', '行政区名称', '行政区总数', '接入量'],
data: [
['1', '咸阳市', '6', '998'],
['1', '咸阳市', '6', '998'],
['1', '咸阳市', '6', '998'],
['1', '咸阳市', '6', '998'],
['1', '咸阳市', '6', '998'],
['1', '咸阳市', '6', '998'],
]
}
}
},
components: { columnarsmat, Rose },
mounted () {
scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
beforeDestroy () { },
};
}
}
</script>
<style lang="scss" scoped>
/deep/.row-item:not(:last-child) {
margin-bottom: 5px;
}
.rightcard {
display: flex;
flex-direction: column;
.cardhead {
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
font-size: 20px;
font-weight: bold;
color: #02D9FD;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 15px;
text-align: center;
}
.cardcontent {
width: 100%;
height: 250px;
}
/deep/.el-table tr:nth-child(even) {
background-color: #043d72 !important;
}
/deep/.el-table__body-wrapper {
background-color: #043d72
}
/* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #043d72
}
/* 非斑马纹颜色 */
/deep/.el-table tr {
background: #043d72
}
/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
border: none;
color: white;
}
/* 这里是滑过斑马纹滑过时的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #021c55;
}
.el-table {
--el-table-border: 0px;
--el-table-border-color: rgb(0 0 0 / 0%);
.cardCon {
padding: 20px 10px;
position: relative;
text-align: center;
width: 100%;
}
}
.card1 {
height: 240px;
background: url("~@/image/homeLeftBg.png") no-repeat;
background-size: 100% 100%;
/deep/.el-table .el-table__cell {
padding: 6px 0;
.board {
width: 90%;
margin: 0 auto;
height: 165px;
margin-top: 40px;
}
}
.card2 {
background: url("~@/image/djywl.png") no-repeat;
background-size: 100% 100%;
padding: 70px 0 20px 0;
}
.card {
width: 100%;
height: 300px;
.card3 {
height: 170px;
background: url("~@/image/lxzl.png") no-repeat;
background-size: 100% 100%;
}
.cardhead {
position: absolute;
}
}
</style>
......
......@@ -41,12 +41,11 @@ export default {
<style scoped lang="scss">
.content {
width: 98%;
width: 100%;
height: calc(100% -94px);
margin: auto;
display: flex;
display: flex;
justify-content: space-between;
.centercard {
width: 40%;
......