Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
75438cd1 by xiaomiao
Options

大屏

1 parent 5330d832
Inline Side-by-side
Showing 16 changed files with 1042 additions and 434 deletions
<template>
<div>
<!-- 折线图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="300px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
xAxisData:{},
yAxisData1:{},
yAxisData2:{},
yAxisData3:{},
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
}
},
methods: {
hexToRgba (hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
},
watch: {
cdata: {
handler(newData) {
this.xAxisData = newData.echartData.map(v => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
this.yAxisData1 = newData.echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
this.yAxisData2 = newData.echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
this.yAxisData3 = newData.echartData.map(v => v.value3);
//[133,133,100,80,99,133,110,80]
this.options = {
color: newData.color,
legend: {
center: true,
top: 10,
data: newData.legendItem,
textStyle: {
color: '#00DEFF',
},
},
// calculable: true,
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = '';
params.forEach(v => {
console.log(v)
html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span>
${v.seriesName}.${v.name}
<span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
个`;
})
return html
},
extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
},
// grid: {
// top: 70,
// containLabel: true
// },
grid: {
top: "20%",
left: "3%",
right: "6%",
bottom: "8%",
containLabel: true,
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255,0.5)"
}
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(255, 255, 255,0.7)', // x轴颜色
fontWeight: 'normal',
fontSize: '12',
lineHeight: 22
}
},
data: this.xAxisData
}],
yAxis: [{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255,0.7)"
}
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255,0.5)"
}
},
axisLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255,0.5)"
}
},
axisTick: {
show: false
}
}],
series: [{
name: newData.legendItem[0],
type: "line",
smooth: false, //是否平滑
// showSymbol: false,/
symbolSize: 6,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[0],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[0], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData1
}, {
name: newData.legendItem[1],
type: "line",
smooth: false,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[1],
shadowBlur: 0,
shadowColor: this.hexToRgba(newData.color[1], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData2
},
{
name: newData.legendItem[2],
type: "line",
smooth: false,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[2],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[2], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData3
}
]
};
},
immediate: true,
deep: true,
},
},
};
</script>
<template>
<div>
<Chart :cdata="cdata"/>
</div>
</template>
<script>
import Chart from './chart.vue'
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,
}
],
}
};
},
components: {
Chart,
},
mounted () {
},
methods: {
}
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="220px"
width="459px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "0%",
left: "1%",
right: "30%",
bottom: "0%",
},
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
series: [
{
name: "业务量",
type: "pie",
radius: [30, 80],
roseType: "area",
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<Chart :cdata="cdata" />
<div class="rotograph">佛坪县</div>
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: {
seriesData: [
{ value: 10, name: "土地所有权" },
{ value: 5, name: "建设用地、宅基地使用权" },
{ value: 15, name: "房地产权（项目内多幢房屋）" },
{ value: 25, name: "产地产权（独幢、层、套、间、房屋）" },
{ value: 20, name: "建筑物区分所有权业主共有部分" },
{ value: 35, name: "海域（含无居民海岛）使用权" },
{ value: 10, name: "构（建）筑物所有权" },
{ value: 5, name: "农用地使用权（非林地）" },
{ value: 15, name: "林权" },
{ value: 25, name: "注销登记" },
{ value: 20, name: "异议登记" },
{ value: 35, name: "预告登记" },
{ value: 20, name: "查封登记" },
{ value: 35, name: "抵押权登记" },
{ value: 20, name: "地役权登记" }
]
}
}
},
components: {
Chart,
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.rotograph{
margin: auto;
width:200px;
height: 30px;
background-color: rgb(6, 121, 167);
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 6px;
font-weight: 600;
}
</style>
<template>
<div>
<!-- 年度开工率 -->
<!-- 柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
......@@ -11,9 +11,9 @@
</template>
<script>
import Echart from '@/common/echart'
import Echart from "@/common/echart";
export default {
data () {
data() {
return {
options: {},
};
......@@ -24,106 +24,105 @@ export default {
props: {
cdata: {
type: Object,
default: () => ({})
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
handler(newData) {
this.options = {
legend: {
data: ['资产原值', '累计折旧'],
data: ["成功", "失败"],
textStyle: {
color: "#B4B4B4"
color: "#B4B4B4",
},
top: "0%"
top: "1%",
right: "1%",
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
grid: {
left: "3%",
right: "6%",
bottom: "8%",
containLabel: true,
},
xAxis: {
type: 'value',
splitLine: {show: false},
axisTick: { show: false },
axisLine: {
show: true,
lineStyle:{
color:'#01F3F5'
type: "value",
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
},
},
axisLabel: {
show:true,
textStyle:{
color:'#01F3F5',
fontSize:12,
axisLabel: {
show: true,
textStyle: {
color: "#01F3F5",
fontSize: 12,
},
},
rotate:30
}
},
yAxis: {
type: 'category',
data: ['房屋','建筑物','机械设备','运输工具'],
splitLine: {show: false},
axisTick: { show: false },
axisLine: {
show: true,
lineStyle:{
color:'#01F3F5'
}
},
},
type: "category",
data: newData.category,
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
},
},
series: [
{
name: '资产原值',
type: 'bar',
stack: '总量',
barWidth: 30,
itemStyle:{
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 30,
itemStyle: {
normal: {
color: '#6601FF',
}
},
label: {
color: "#6601FF",
},
},
label: {
normal: {
show: true,
position: 'insideRight'
}
show: true,
position: "insideRight",
},
},
z: 10,
data: newData.barData,
},
z: 10,
data: [320, 302, 301, 543]
},
{
name: '累计折旧',
type: 'bar',
stack: '总量',
itemStyle:{
{
name: "失败",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
color: '#00F0FF'
}
},
label: {
color: "#00F0FF",
},
},
label: {
normal: {
show: true,
position: 'insideRight',
textStyle:{
color:'#6601FF'
}
}
show: true,
position: "insideRight",
textStyle: {
color: "#6601FF",
},
},
},
z: 5,
data: newData.lineData,
},
z: 5,
data: [90, 230, 210, 432]
},
]
}
],
};
},
immediate: true,
deep: true
deep: true,
},
},
}
};
</script>
......
......@@ -18,102 +18,40 @@ export default {
"西乡县",
"勉县",
"宁强县",
"永川",
"璧山",
"江津",
"城口",
"大足",
"垫江",
"丰都",
"奉节",
"合川",
"江津区",
"开州",
"南川",
"彭水",
"黔江",
"石柱",
"铜梁",
"潼南",
"巫山",
"巫溪",
"武隆",
"秀山",
"酉阳",
"云阳",
"忠县",
"川东",
"检修"
"略阳县",
"镇巴县",
"留坝县",
"佛坪县",
],
lineData: [
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
56061,
62677,
59521,
67560,
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
36097,
39867,
44715,
48444,
50415,
50061,
32677,
49521,
32808
39867
],
barData: [
4600,
5000,
5500,
6500,
7500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
33300,
4600,
5000,
5500,
6500,
7500,
8500,
9900,
22500,
14000,
21500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
7500
],
rateData: []
}
......@@ -131,4 +69,5 @@ export default {
</script>
<style lang="scss" scoped>
</style>
......
<template>
<div>
<!-- 柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="300px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
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)",
},
},
},
yAxis: {
splitLine: {
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)",
},
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,
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,
},
],
}
},
immediate: true,
deep: true,
},
},
};
</script>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
cdata: {
category: [
"首次",
"转移",
"变更",
"注销",
"更正",
"异议",
"预告",
"查封",
"其他",
],
lineData: [
14715,
8444,
10415,
6061,
18092,
12728,
9045,
8348,
20008,
],
}
};
},
components: {
Chart,
},
mounted () {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<!-- 地图 -->
<Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px"
:options="options"></Echart>
</div>
......
......@@ -138,6 +138,17 @@ div:focus {
.fl {
float: left;
}
// 大屏阴影
// 大屏图表背景
.bg-shadow{
background-color: rgb(4, 61, 114)!important;
box-shadow:0px 0px 4px 6px rgb(4, 61, 114),
inset 0px 0px 16px 0px rgb(3, 49, 87);
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.pr-5 {
padding-right: 5px;
......@@ -410,4 +421,6 @@ aside {
.item-cwnr img {
height: 30px;
}
\ No newline at end of file
}
......
<template>
<div class="centercard">
<div class="card1">
<CenterLeft2Chart class="map" />
<div class="card1 bg-shadow">
<maps class="map" />
</div>
<div class="card2 bg-shadow">
<Brokenline class="Brokenline" />
</div>
<div class="card2"></div>
</div>
</template>
<script>
import CenterLeft2Chart from "@/components/echart/map";
import maps from "@/components/echart/map";
import Brokenline from "@/components/echart/Brokenline";
export default {
data() {
return {};
},
components: { CenterLeft2Chart },
components: { maps,Brokenline },
mounted() {},
beforeDestroy() {},
methods: {},
......@@ -27,16 +30,22 @@ export default {
.card1{
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.map{
margin: auto;
width: 95%;
height: 600px;
}
}
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.Brokenline{
margin: auto;
width: 100%;
height: 300px;
}
}
}
</style>
......
......@@ -6,7 +6,7 @@
}
#index {
color: #d3d6dd;
width:2150px;
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
......
......@@ -26,11 +26,8 @@
<dv-decoration-10 class="dv-dec-10-s" />
</div>
</div>
<div class="content">
<leftcard/>
<centercard/>
<rightcard/>
</div>
<screencontent/>
</div>
</div>
</div>
......@@ -38,9 +35,7 @@
</template>
<script>
import drawMixin from "../../utils/drawMixin";
import leftcard from './leftcard'
import centercard from './centercard'
import rightcard from './rightcard'
import screencontent from './screencontent'
export default {
mixins: [drawMixin],
data() {
......@@ -49,7 +44,7 @@ export default {
};
},
components: {
leftcard,centercard,rightcard
screencontent
},
mounted() {
// this.timeFn();
......
<template>
<div class="leftcard">
<div class="card1">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card3">
<div class="cardhead">各区县数据上报统计</div>
<columnar />
</div>
</div>
<div class="leftcard">
<div class="card1 bg-shadow">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2 bg-shadow">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card3 bg-shadow">
<div class="cardhead">各区县数据上报统计</div>
<columnar />
</div>
</div>
</template>
<script>
import columnar from "@/components/echart/columnar";
export default {
data() {
return {
};
},
components: { columnar },
mounted() {
},
beforeDestroy() {
},
methods: {
return {};
},
components: { columnar },
mounted() {},
beforeDestroy() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.leftcard{
width: 25%;
height: 100%;
.cardhead{
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
.leftcard {
width: 25%;
height: 100%;
.cardhead {
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent {
width: 100%;
height: 160px;
display: flex;
.text1 {
width: 33%;
height: 100%;
p {
height: 70px;
line-height: 70px;
font-size: 40px;
text-align: center;
}
.cardcontent{
width: 100%;
height: 160px;
display: flex;
.text1{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 40px;
text-align: center;;
};
p:nth-child(2){
color: rgb(180, 178, 178);
};
}
.text2{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
}
.text3{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
}
p:nth-child(2) {
color: rgb(180, 178, 178);
}
.card1{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3{
width: 100%;
height: 500px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.mainCss{
width: 500px;
height:445px;
background-color: saddlebrown;
}
}
}
.text2 {
width: 33%;
height: 100%;
p {
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;
color: rgb(180, 178, 178);
}
}
.text3 {
width: 33%;
height: 100%;
p {
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;
color: rgb(180, 178, 178);
}
}
}
.card1 {
width: 100%;
height: 200px;
}
.card2 {
width: 100%;
height: 200px;
}
.card3 {
width: 100%;
height: 500px;
.mainCss {
width: 450px;
height: 420px;
background-color: saddlebrown;
}
}
}
</style>
......
<template>
<div class="leftcard">
<div class="card1">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card3">
<div class="cardhead">各区县数据上报统计</div>
<div class="mainCss" ref="myRef"></div>
</div>
</div>
<div class="leftcard">
<div class="card bg-shadow">
<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="序号" width="100" />
<el-table-column prop="use" label="用途" width="100" />
<el-table-column prop="property" label="性质" width="120" />
<el-table-column prop="area" label="面积" width="130" />
</el-table>
</div>
</div>
<div class="card bg-shadow">
<div class="cardhead">登记业务量</div>
<Rose/>
</div>
<div class="card bg-shadow">
<div class="cardhead">登记类型总量</div>
<columnarsmat/>
</div>
</div>
</template>
<script>
import CenterLeft2Chart from "@/components/echart/map";
import columnarsmat from "@/components/echart/columnarsmat";
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'
}]
};
},
components: { CenterLeft2Chart },
components: { columnarsmat,Rose },
mounted() {
scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
beforeDestroy() {
},
beforeDestroy() {},
methods: {
},
......@@ -64,93 +89,61 @@ export default {
</script>
<style lang="scss" scoped>
.leftcard{
width: 25%;
height: 100%;
.cardhead{
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent{
width: 100%;
height: 160px;
display: flex;
.text1{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 40px;
text-align: center;;
.leftcard {
width: 25%;
height: 100%;
.cardhead {
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent {
width: 450px;
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
}
};
p:nth-child(2){
color: rgb(180, 178, 178);
/* 非斑马纹颜色 */
/deep/.el-table tr {
background: #043d72
}
};
}
.text2{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
p:nth-child(2){
color: rgb(180, 178, 178);
/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
border: none;
color: white;
}
};
}
.text3{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
p:nth-child(2){
/* 这里是滑过斑马纹滑过时的颜色 */
/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%);
}
/deep/.el-table .el-table__cell {
padding: 6px 0;
}
};
}
}
.card1{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card{
width: 100%;
height: 300px;
}
}
.card2{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3{
width: 100%;
height: 500px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.mainCss{
width: 500px;
height:445px;
background-color: saddlebrown;
}
}
}
}
</style>
......
<template>
<div class="content">
<leftcard />
<centercard />
<rightcard />
</div>
</template>
<script>
import drawMixin from "../../utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
mixins: [drawMixin],
data() {
return {
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
leftcard,
centercard,
rightcard,
},
mounted() {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy() {
clearInterval(this.timing);
},
methods: {
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>