Skip to content

bdc / bdcjg-web

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

style:首页完成

1 parent e1f0d80d
Inline Side-by-side
Showing 18 changed files with 517 additions and 541 deletions
1 <template> 1 <template>
2 <div>
3 <!-- 折线图 --> 2 <!-- 折线图 -->
4 <Echart 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template> 4 </template>
12 5
13 <script> 6 <script>
14 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
15 export default { 8 export default {
16 data() { 9 data () {
17 return { 10 return {
18 11 xAxisData: {},
19 xAxisData:{}, 12 yAxisData1: {},
20 yAxisData1:{}, 13 yAxisData2: {},
21 yAxisData2:{}, 14 yAxisData3: {},
22 yAxisData3:{}, 15 options: {},
23 options: {}, 16 };
24 }; 17 },
25 }, 18 components: {
26 components: { 19 Echart,
27 Echart, 20 },
28 }, 21 props: {
29 props: { 22 cdata: {
30 cdata: { 23 type: Object,
31 type: Object, 24 default: () => ({}),
32 default: () => ({}), 25 }
33 }
34 },
35 methods: {
36 hexToRgba (hex, opacity) {
37 let rgbaColor = "";
38 let reg = /^#[\da-f]{6}$/i;
39 if (reg.test(hex)) {
40 rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
41 "0x" + hex.slice(3, 5)
42 )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
43 }
44 return rgbaColor;
45 }
46 },
47 watch: {
48 cdata: {
49 handler(newData) {
50 this.xAxisData = newData.echartData.map(v => v.name);
51 //  ["1", "2", "3", "4", "5", "6", "7", "8"]
52 this.yAxisData1 = newData.echartData.map(v => v.value1);
53 // [100, 138, 350, 173, 180, 150, 180, 230]
54 this.yAxisData2 = newData.echartData.map(v => v.value2);
55 // [233, 233, 200, 180, 199, 233, 210, 180]
56 this.yAxisData3 = newData.echartData.map(v => v.value3);
57 //[133,133,100,80,99,133,110,80]
58 this.options = {
59 color: newData.color,
60 legend: {
61 center: true,
62 top: 10,
63 data: newData.legendItem,
64 textStyle: {
65 color: '#00DEFF',
66 },
67 }, 26 },
68 // calculable: true, 27 methods: {
69 tooltip: { 28 hexToRgba (hex, opacity) {
70 trigger: "axis", 29 let rgbaColor = "";
71 formatter: function(params) { 30 let reg = /^#[\da-f]{6}$/i;
72 let html = ''; 31 if (reg.test(hex)) {
73 params.forEach(v => { 32 rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
74 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> 33 "0x" + hex.slice(3, 5)
34 )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
35 }
36 return rgbaColor;
37 }
38 },
39 watch: {
40 cdata: {
41 handler (newData) {
42 this.xAxisData = newData.echartData.map(v => v.name);
43 this.yAxisData1 = newData.echartData.map(v => v.value1);
44 this.yAxisData2 = newData.echartData.map(v => v.value2);
45 this.yAxisData3 = newData.echartData.map(v => v.value3);
46 this.options = {
47 color: newData.color,
48 legend: {
49 center: true,
50 top: '20%',
51 data: newData.legendItem,
52 textStyle: {
53 color: '#00DEFF'
54 }
55 },
56 // calculable: true,
57 tooltip: {
58 trigger: "axis",
59 formatter: function (params) {
60 let html = '';
61 params.forEach(v => {
62 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
75 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span> 63 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span>
76 ${v.seriesName}.${v.name} 64 ${v.seriesName}.${v.name}
77 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span> 65 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
78 个`; 66 个`;
79 }) 67 })
80 68 return html
81 69 },
82 70 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
83 return html
84 },
85 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
86
87 },
88 // grid: {
89 // top: 70,
90 // containLabel: true
91 // },
92 grid: {
93 top: "20%",
94 left: "3%",
95 right: "6%",
96 bottom: "8%",
97 containLabel: true,
98 },
99 xAxis: [{
100 type: 'category',
101 axisTick: {
102 show: false
103 },
104 axisLine: {
105 show: true,
106 lineStyle: {
107 type: "dashed",
108 color: "rgba(255, 255, 255,0.5)"
109 }
110 },
111 axisLabel: {
112 inside: false,
113 textStyle: {
114 color: 'rgba(255, 255, 255,0.7)', // x轴颜色
115 fontWeight: 'normal',
116 fontSize: '12',
117 lineHeight: 22
118 }
119 },
120 71
121 data: this.xAxisData 72 },
122 }], 73 // grid: {
123 yAxis: [{ 74 // top: 70,
124 type: "value", 75 // containLabel: true
125 axisLabel: { 76 // },
126 textStyle: { 77 grid: {
127 color: "rgba(255, 255, 255,0.7)" 78 top: "30%",
128 } 79 left: "3%",
129 }, 80 right: "6%",
130 splitLine: { 81 bottom: "8%",
131 show: false, 82 containLabel: true,
132 lineStyle: { 83 },
133 type: "dashed", 84 xAxis: [{
134 color: "rgba(255, 255, 255,0.5)" 85 type: 'category',
135 } 86 axisLine: {
136 }, 87 show: true,
137 axisLine: { 88 lineStyle: {
138 show: true, 89 color: "#458ACF"
139 lineStyle: { 90 }
140 type: "dashed", 91 },
141 color: "rgba(255, 255, 255,0.5)" 92 axisLabel: {
142 } 93 inside: false,
143 }, 94 textStyle: {
144 axisTick: { 95 color: 'rgba(255, 255, 255,0.7)', // x轴颜色
145 show: false 96 fontWeight: 'normal',
146 } 97 fontSize: '12',
147 }], 98 lineHeight: 22
148 series: [{ 99 }
149 name: newData.legendItem[0], 100 },
150 type: "line", 101 data: this.xAxisData
151 smooth: false, //是否平滑 102 }],
152 // showSymbol: false,/ 103 yAxis: [{
153 symbolSize: 6, 104 type: "value",
154 zlevel: 3, 105 axisLabel: {
155 lineStyle: { 106 textStyle: {
156 normal: { 107 color: "rgba(255, 255, 255,0.7)"
157 color: newData.color[0], 108 }
158 shadowBlur: 3, 109 },
159 shadowColor: this.hexToRgba(newData.color[0], 0.5), 110 splitLine: {
160 shadowOffsetY: 0 111 show: true,
161 } 112 lineStyle: {
162 }, 113 color: "#458ACF"
163 data: this.yAxisData1 114 }
164 }, { 115 },
165 name: newData.legendItem[1], 116 axisLine: {
166 type: "line", 117 show: true,
167 smooth: false, 118 lineStyle: {
168 // showSymbol: false, 119 color: "#458ACF"
169 symbolSize: 8, 120 }
170 zlevel: 3, 121 },
171 lineStyle: { 122 axisTick: {
172 normal: { 123 show: false
173 color: newData.color[1], 124 }
174 shadowBlur: 0, 125 }],
175 shadowColor: this.hexToRgba(newData.color[1], 0.5), 126 series: [{
176 shadowOffsetY: 0 127 name: newData.legendItem[0],
177 } 128 type: "line",
129 smooth: true, //是否平滑
130 showSymbol: false,
131 symbolSize: 6,
132 zlevel: 3,
133 lineStyle: {
134 normal: {
135 color: newData.color[0],
136 shadowBlur: 3,
137 shadowColor: this.hexToRgba(newData.color[0], 0.5),
138 shadowOffsetY: 0
139 }
140 },
141 data: this.yAxisData1
142 }, {
143 name: newData.legendItem[1],
144 type: "line",
145 smooth: true,
146 showSymbol: false,
147 symbolSize: 8,
148 zlevel: 3,
149 lineStyle: {
150 normal: {
151 color: newData.color[1],
152 shadowBlur: 0,
153 shadowColor: this.hexToRgba(newData.color[1], 0.5),
154 shadowOffsetY: 0
155 }
156 },
157 data: this.yAxisData2
158 },
159 {
160 name: newData.legendItem[2],
161 type: "line",
162 smooth: true,
163 showSymbol: false,
164 symbolSize: 8,
165 zlevel: 3,
166 lineStyle: {
167 normal: {
168 color: newData.color[2],
169 shadowBlur: 3,
170 shadowColor: this.hexToRgba(newData.color[2], 0.5),
171 shadowOffsetY: 0
172 }
173 },
174 data: this.yAxisData3
175 }
176 ]
177 };
178 },
179 immediate: true,
180 deep: true,
178 }, 181 },
179 data: this.yAxisData2
180 },
181 {
182 name: newData.legendItem[2],
183 type: "line",
184 smooth: false,
185 // showSymbol: false,
186 symbolSize: 8,
187 zlevel: 3,
188 lineStyle: {
189 normal: {
190 color: newData.color[2],
191 shadowBlur: 3,
192 shadowColor: this.hexToRgba(newData.color[2], 0.5),
193 shadowOffsetY: 0
194 }
195 },
196 data: this.yAxisData3
197 }
198 ]
199 };
200 },
201 immediate: true,
202 deep: true,
203 }, 182 },
204 },
205 }; 183 };
206 </script> 184 </script>
......
1 <template> 1 <template>
2 <div> 2 <Chart :cdata="cdata" />
3 <Chart :cdata="cdata"/>
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
...@@ -10,99 +8,84 @@ export default { ...@@ -10,99 +8,84 @@ export default {
10 data () { 8 data () {
11 return { 9 return {
12 cdata: { 10 cdata: {
13 legendItem :['接入','上报','登簿'], 11 legendItem: ['接入', '上报', '登簿'],
14 color : [ 12 color: [
15 "#0090FF", 13 "#5324DA",
16 "#EE8931", 14 "#E873B2",
17 "#8B5CFF" 15 "#F4AF6F "
18 ],
19 echartData :[{
20 name: "2017-11",
21 value1: 1351,
22 value2: 600,
23 value3: 568,
24 },
25 {
26 name: "2017-11",
27 value1: 980,
28 value2: 1245,
29 value3: 1100,
30 },
31 {
32 name: "2017-11",
33 value1: 1127,
34 value2: 398,
35 value3: 568,
36 },
37 {
38 name: "2017-11",
39 value1: 1046,
40 value2: 689,
41 value3: 479
42 },
43 {
44 name: "2018-02",
45 value1: 780,
46 value2: 396,
47 value3: 655
48 },
49 {
50 name: "2018-08",
51 value1: 359,
52 value2: 1220,
53 value3: 540,
54 },
55 {
56 name: "2018-07",
57 value1: 229,
58 value2: 836,
59 value3: 1234,
60 },
61 {
62 name: "2018-09",
63 value1: 1176,
64 value2: 478,
65 value3: 755,
66 },
67 {
68 name: "2018-11",
69 value1: 515,
70 value2: 911,
71 value3: 806,
72 },
73 {
74 name: "2019-01",
75 value1: 658,
76 value2: 979,
77 value3: 813,
78 },
79 {
80 name: "2019-03",
81 value1: 364,
82 value2: 839,
83 value3: 886,
84 },
85 {
86 name: "2019-05",
87 value1: 973,
88 value2: 816,
89 value3: 791,
90 }
91 ], 16 ],
92 17 echartData: [{
18 name: "2017-11",
19 value1: 1351,
20 value2: 600,
21 value3: 568,
22 },
23 {
24 name: "2017-11",
25 value1: 980,
26 value2: 1245,
27 value3: 1100,
28 },
29 {
30 name: "2017-11",
31 value1: 1127,
32 value2: 398,
33 value3: 568,
34 },
35 {
36 name: "2017-11",
37 value1: 1046,
38 value2: 689,
39 value3: 479
40 },
41 {
42 name: "2018-02",
43 value1: 780,
44 value2: 396,
45 value3: 655
46 },
47 {
48 name: "2018-08",
49 value1: 359,
50 value2: 1220,
51 value3: 540,
52 },
53 {
54 name: "2018-07",
55 value1: 229,
56 value2: 836,
57 value3: 1234,
58 },
59 {
60 name: "2018-09",
61 value1: 1176,
62 value2: 478,
63 value3: 755,
64 },
65 {
66 name: "2018-11",
67 value1: 515,
68 value2: 911,
69 value3: 806,
70 },
71 {
72 name: "2019-01",
73 value1: 658,
74 value2: 979,
75 value3: 813,
76 },
77 {
78 name: "2019-03",
79 value1: 364,
80 value2: 839,
81 value3: 886,
82 },
83 ]
93 } 84 }
94 }; 85 }
95 }, 86 },
96 components: { 87 components: {
97 Chart, 88 Chart
98 },
99 mounted () {
100
101 },
102 methods: {
103
104 } 89 }
105 }; 90 }
106 </script> 91 </script>
107
108 <style lang="scss" scoped></style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div> 2 <Echart :options="options" id="centreLeft1Chart" height="200px" width="95%"></Echart>
3 <Echart :options="options" id="centreLeft1Chart" height="220px" width="100%"></Echart>
4 </div>
5 </template> 3 </template>
6
7 <script> 4 <script>
8 import Echart from '@/common/echart' 5 import Echart from '@/common/echart'
9 export default { 6 export default {
10 data () {
11 return {
12 options: {},
13 };
14 },
15 components: { 7 components: {
16 Echart, 8 Echart,
17 }, 9 },
...@@ -27,9 +19,8 @@ export default { ...@@ -27,9 +19,8 @@ export default {
27 this.options = { 19 this.options = {
28 grid: { 20 grid: {
29 // 让图表占满容器 21 // 让图表占满容器
30 top: "0%", 22 top: "50%",
31 left: "10%", 23 right: '30%',
32 right: "40%",
33 bottom: "0%", 24 bottom: "0%",
34 }, 25 },
35 color: [ 26 color: [
...@@ -50,7 +41,6 @@ export default { ...@@ -50,7 +41,6 @@ export default {
50 show: true 41 show: true
51 }, 42 },
52 calculable: true, 43 calculable: true,
53
54 series: [ 44 series: [
55 { 45 {
56 name: "业务量", 46 name: "业务量",
...@@ -70,5 +60,7 @@ export default { ...@@ -70,5 +60,7 @@ export default {
70 </script> 60 </script>
71 61
72 <style lang="scss" scoped> 62 <style lang="scss" scoped>
73 63 #centreLeft1Chart {
64 margin-left: -20px;
65 }
74 </style> 66 </style>
......
...@@ -52,5 +52,7 @@ export default { ...@@ -52,5 +52,7 @@ export default {
52 text-align: center; 52 text-align: center;
53 border-radius: 6px; 53 border-radius: 6px;
54 font-weight: 600; 54 font-weight: 600;
55 color: #02D9FD;
56 margin-top: 20px;
55 } 57 }
56 </style> 58 </style>
......
1 <template> 1 <template>
2 <div> 2 <!-- 柱状图 -->
3 <!-- 柱状图 --> 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
4 <Echart
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template> 4 </template>
12 5
13 <script> 6 <script>
14 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
15 export default { 8 export default {
16 data() { 9 data () {
17 return { 10 return {
18 options: {}, 11 options: {},
19 }; 12 };
...@@ -29,102 +22,102 @@ export default { ...@@ -29,102 +22,102 @@ export default {
29 }, 22 },
30 watch: { 23 watch: {
31 cdata: { 24 cdata: {
32 handler(newData) { 25 handler (newData) {
33 this.options ={ 26 this.options = {
34 grid: { 27 grid: {
35 // 让图表占满容器 28 // 让图表占满容器
36 top: "12%", 29 top: "12%",
37 left: "15%", 30 left: "15%",
38 right: "10%", 31 right: "10%",
39 bottom: "26%", 32 bottom: "26%",
40 },
41 xAxis: {
42 data: newData.category,
43 axisLabel: {
44 show: true,
45 color: "#ffff",
46 },
47 axisTick: {
48 show: false,
49 },
50 axisLine: {
51 show: true,
52 lineStyle: {
53 color: "rgba(95, 180, 237, 0.32)",
54 }, 33 },
55 }, 34 xAxis: {
56 }, 35 data: newData.category,
57 yAxis: { 36 axisLabel: {
58 splitLine: { 37 show: true,
59 show: false, 38 color: "#ffff",
60 }, 39 },
61 axisLine: { 40 axisTick: {
62 show: true, 41 show: false,
63 lineStyle: { 42 },
64 color: "rgba(95, 180, 237, 0.32)", 43 axisLine: {
44 show: true,
45 lineStyle: {
46 color: "rgba(95, 180, 237, 0.32)",
47 },
48 },
65 }, 49 },
66 }, 50 yAxis: {
67 axisTick: { 51 splitLine: {
68 show: false, 52 show: false,
69 }, 53 },
70 axisLabel: { 54 axisLine: {
71 color: "#ffff", 55 show: true,
72 }, 56 lineStyle: {
73 }, 57 color: "rgba(95, 180, 237, 0.32)",
74 series: [ 58 },
75 { 59 },
76 // 顶部圆片 60 axisTick: {
77 type: "pictorialBar", 61 show: false,
78 animation: false, 62 },
79 itemStyle: { 63 axisLabel: {
80 color: "rgba(115, 240, 252, 1)", 64 color: "#ffff",
65 },
81 }, 66 },
82 symbolRepeat: false, 67 series: [
83 symbolSize: [15, 8], 68 {
84 symbolMargin: 1, 69 // 顶部圆片
85 z: 10, 70 type: "pictorialBar",
86 data: newData.lineData, 71 animation: false,
87 symbolPosition: "end", 72 itemStyle: {
88 symbolOffset: [0, -4], 73 color: "rgba(115, 240, 252, 1)",
89 }, 74 },
90 { 75 symbolRepeat: false,
91 // 底部圆片 76 symbolSize: [15, 8],
92 type: "pictorialBar", 77 symbolMargin: 1,
93 animation: false, 78 z: 10,
79 data: newData.lineData,
80 symbolPosition: "end",
81 symbolOffset: [0, -4],
82 },
83 {
84 // 底部圆片
85 type: "pictorialBar",
86 animation: false,
94 87
95 itemStyle: { 88 itemStyle: {
96 color: "rgba(50, 96, 225, 0.8)", 89 color: "rgba(50, 96, 225, 0.8)",
97 }, 90 },
98 symbolRepeat: false, 91 symbolRepeat: false,
99 symbolSize: [15, 8], 92 symbolSize: [15, 8],
100 symbolMargin: 1, 93 symbolMargin: 1,
101 z: 10, 94 z: 10,
102 data: newData.lineData, 95 data: newData.lineData,
103 symbolPosition: "start", 96 symbolPosition: "start",
104 symbolOffset: [0, 3], 97 symbolOffset: [0, 3],
105 }, 98 },
106 { 99 {
107 barWidth: 15, 100 barWidth: 15,
108 animation: false, 101 animation: false,
109 102
110 type: "bar", 103 type: "bar",
111 label: { 104 label: {
112 show: true, 105 show: true,
113 position: "top", 106 position: "top",
114 textStyle: { 107 textStyle: {
115 color: "#ffff", 108 color: "#ffff",
109 },
110 },
111 itemStyle: {
112 color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
113 { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
114 { offset: 0, color: "rgba(82, 180, 249, 1)" },
115 ]),
116 },
117 data: newData.lineData,
116 }, 118 },
117 }, 119 ],
118 itemStyle: { 120 }
119 color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
120 { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
121 { offset: 0, color: "rgba(82, 180, 249, 1)" },
122 ]),
123 },
124 data: newData.lineData,
125 },
126 ],
127 }
128 }, 121 },
129 immediate: true, 122 immediate: true,
130 deep: true, 123 deep: true,
......
1 <template> 1 <template>
2 <div> 2 <Chart :cdata="cdata" />
3 <Chart :cdata="cdata" />
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
...@@ -32,7 +30,7 @@ export default { ...@@ -32,7 +30,7 @@ export default {
32 9045, 30 9045,
33 8348, 31 8348,
34 20008, 32 20008,
35 ], 33 ],
36 } 34 }
37 }; 35 };
38 }, 36 },
...@@ -48,4 +46,5 @@ export default { ...@@ -48,4 +46,5 @@ export default {
48 </script> 46 </script>
49 47
50 <style lang="scss" scoped> 48 <style lang="scss" scoped>
49
51 </style> 50 </style>
......
1 <template> 1 <template>
2 <div> 2 <!-- 地图 -->
3 <!-- 地图 --> 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="470px"
4 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px" 4 :options="options"></Echart>
5 :options="options"></Echart>
6 </div>
7 </template> 5 </template>
8 6
9 <script> 7 <script>
...@@ -111,8 +109,8 @@ export default { ...@@ -111,8 +109,8 @@ export default {
111 visualMap: { 109 visualMap: {
112 min: 0, 110 min: 0,
113 max: _this.max, 111 max: _this.max,
114 top: "bottom", 112 bottom: '2%',
115 right: 10, 113 right: 30,
116 splitNumber: 6, 114 splitNumber: 6,
117 seriesIndex: [0], 115 seriesIndex: [0],
118 itemWidth: 20, // 每个图元的宽度 116 itemWidth: 20, // 每个图元的宽度
...@@ -133,7 +131,7 @@ export default { ...@@ -133,7 +131,7 @@ export default {
133 aspectScale: 1, //长宽比 131 aspectScale: 1, //长宽比
134 zoom: 1.1, 132 zoom: 1.1,
135 mapType: '汉中市', // 自定义扩展图表类型 133 mapType: '汉中市', // 自定义扩展图表类型
136 top: '20%', 134 top: '15%',
137 left: '10%', 135 left: '10%',
138 itemStyle: { 136 itemStyle: {
139 normal: { 137 normal: {
......
1 <template> 1 <template>
2 <div> 2 <Chart :cdata="cdata" />
3 <Chart :cdata="cdata" />
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
......
1 <template> 1 <template>
2 <div class="centercard"> 2 <div class="centercard">
3 <div class="card1 bg-shadow"> 3 <div class="card1">
4 <div class="title">陕西省不动产接入信息</div>
4 <maps class="map" /> 5 <maps class="map" />
5 </div> 6 </div>
6 <div class="card2 bg-shadow"> 7 <div class="card2 mt-10">
7 <Brokenline class="Brokenline" /> 8 <div class="title">数据趋势</div>
9 <brokenline class="Brokenline" />
8 </div> 10 </div>
9 </div> 11 </div>
10 </template> 12 </template>
11 13
12 <script> 14 <script>
13 import maps from "@/components/echart/map"; 15 import maps from "@/components/echart/map";
14 import Brokenline from "@/components/echart/Brokenline"; 16 import brokenline from "@/components/echart/brokenline";
15 export default { 17 export default {
16 data () { 18 data () {
17 return {}; 19 return {};
18 }, 20 },
19 components: { maps, Brokenline }, 21 components: { maps, brokenline },
20 mounted () { }, 22 mounted () { },
21 beforeDestroy () { }, 23 beforeDestroy () { },
22 methods: {}, 24 methods: {},
...@@ -26,26 +28,60 @@ export default { ...@@ -26,26 +28,60 @@ export default {
26 <style lang="scss" scoped> 28 <style lang="scss" scoped>
27 .centercard { 29 .centercard {
28 width: 48%; 30 width: 48%;
29 height: 100%; 31 height: calc(100vh - 114px);
32 box-sizing: border-box;
33 padding: 0 10px;
34 display: flex;
35 flex-direction: column;
30 36
31 .card1 { 37 .card1 {
32 width: 100%; 38 width: 100%;
33 height: 600px; 39 background: url("~@/image/mapcenter.png") no-repeat;
40 background-size: 100% 100%;
41 position: relative;
42 height: 470px;
34 43
35 .map { 44 .title {
36 margin: auto; 45 position: absolute;
37 width: 95%; 46 font-weight: bold;
38 height: 600px; 47 color: #02D9FD;
48 line-height: 26px;
49 font-size: 22px;
50 position: absolute;
51 left: 0;
52 right: 0;
53 top: 9px;
54 text-align: right;
55 padding-right: 15%;
39 } 56 }
40 } 57 }
41 58
42 .card2 { 59 .card2 {
43 width: 100%; 60 width: 100%;
61 background: url("~@/image/sjqs.png") no-repeat;
62 background-size: 100% 100%;
63 position: relative;
64 flex: 1;
65 height: 100%;
66 width: 100%;
67
68 .title {
69 position: absolute;
70 font-weight: bold;
71 color: #02D9FD;
72 line-height: 26px;
73 font-size: 22px;
74 position: absolute;
75 left: 0;
76 right: 0;
77 top: 9px;
78 text-align: center;
79 margin-bottom: 10px;
80 }
44 81
45 .Brokenline { 82 .Brokenline {
46 margin: auto; 83 margin: auto;
47 width: 100%; 84 width: 100%;
48 height: 300px;
49 } 85 }
50 } 86 }
51 } 87 }
......
...@@ -5,18 +5,18 @@ ...@@ -5,18 +5,18 @@
5 <div class="cardcontent"> 5 <div class="cardcontent">
6 <ul class="cardcontent-left d-center"> 6 <ul class="cardcontent-left d-center">
7 <div class="rjjrlList"> 7 <div class="rjjrlList">
8 <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> 8 <p v-for="(item, index) in rjjrlList" class="d-center qxjr" :key="index">{{ item }}</p>
9 </div> 9 </div>
10 <li>日均接入量</li> 10 <li>日均接入量</li>
11 </ul> 11 </ul>
12 <div class="cardcontent-right d-center"> 12 <div class="cardcontent-right d-center">
13 <p> 13 <p>
14 <span>失败</span> 14 <span>失败</span>
15 <span>0</span> 15 <span class="bad">0</span>
16 </p> 16 </p>
17 <p> 17 <p>
18 <span>成功率</span> 18 <span>成功率</span>
19 <span>99%</span> 19 <span class="cg">99%</span>
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
...@@ -26,18 +26,18 @@ ...@@ -26,18 +26,18 @@
26 <div class="cardcontent"> 26 <div class="cardcontent">
27 <ul class="cardcontent-left d-center"> 27 <ul class="cardcontent-left d-center">
28 <div class="rjjrlList"> 28 <div class="rjjrlList">
29 <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> 29 <p v-for="(item, index) in rjjrlList" class="d-center sthj" :key="index">{{ item }}</p>
30 </div> 30 </div>
31 <li>日均接入量</li> 31 <li>日均接入量</li>
32 </ul> 32 </ul>
33 <div class="cardcontent-right d-center"> 33 <div class="cardcontent-right d-center">
34 <p> 34 <p>
35 <span>失败</span> 35 <span>失败</span>
36 <span>0</span> 36 <span class="bad">0</span>
37 </p> 37 </p>
38 <p> 38 <p>
39 <span>成功率</span> 39 <span>成功率</span>
40 <span>99%</span> 40 <span class="cg">99%</span>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
...@@ -78,17 +78,22 @@ export default { ...@@ -78,17 +78,22 @@ export default {
78 .leftcard { 78 .leftcard {
79 width: 30%; 79 width: 30%;
80 height: 100%; 80 height: 100%;
81 81 display: flex;
82 flex-direction: column;
82 .card { 83 .card {
83 background: url("~@/image/homeLeftBg.png") no-repeat; 84 background: url("~@/image/homeLeftBg.png") no-repeat;
84 background-size: 100% 100%; 85 background-size: 100% 100%;
85 position: relative; 86 position: relative;
87 flex: 1;
88 height: 100%;
89 padding: 8px 0;
86 } 90 }
87 91
88 .card1 { 92 .card1 {
89 background: url("~@/image/qxsj.png") no-repeat; 93 background: url("~@/image/qxsj.png") no-repeat;
90 background-size: 100% 100%; 94 background-size: 100% 100%;
91 position: relative; 95 position: relative;
96 padding: 10px 0;
92 } 97 }
93 98
94 .cardhead { 99 .cardhead {
...@@ -107,25 +112,33 @@ export default { ...@@ -107,25 +112,33 @@ export default {
107 112
108 .rjjrlList { 113 .rjjrlList {
109 display: flex; 114 display: flex;
115 margin-top: 15px;
110 116
111 p { 117 .qxjr {
112 background: url('~@/image/jrl3.png'); 118 background: url('~@/image/jrl3.png');
119 }
120
121 .sthj {
122 background: url('~@/image/jh.png');
123 }
124
125 p {
113 margin: 0 3px 10px 3px; 126 margin: 0 3px 10px 3px;
114 font-weight: 700; 127 font-weight: 700;
115 width: 24px; 128 width: 24px;
116 height: 36px; 129 height: 36px;
117 font-size: 30px; 130 font-size: 30px;
118 font-size: 30px; 131 font-size: 32px;
119 } 132 }
120 } 133 }
121 134
122 .cardcontent { 135 .cardcontent {
123 width: 100%; 136 width: 100%;
124 height: 160px; 137 height: 100%;
125 display: flex; 138 display: flex;
126 padding: 35px 20px 20px 20px; 139 padding: 35px 20px 20px 20px;
127 box-sizing: border-box; 140 box-sizing: border-box;
128 color: #FFFFFF; 141 color: #E3F1FF;
129 142
130 .cardcontent-left { 143 .cardcontent-left {
131 width: 60%; 144 width: 60%;
...@@ -147,9 +160,28 @@ export default { ...@@ -147,9 +160,28 @@ export default {
147 flex: 1; 160 flex: 1;
148 width: 100%; 161 width: 100%;
149 flex-direction: column; 162 flex-direction: column;
163 font-size: 16px;
164
165 .bad {
166 color: #C97168;
167 }
168
169 .cg {
170 color: #5FBA7D;
171 }
172
173 p {
174 margin-bottom: 8px;
175
176 span:nth-child(1) {
177 margin-right: 15px;
178 }
179
180 span:nth-child(2) {
181 font-size: 20px;
182 font-weight: 900;
150 183
151 p:nth-child(1) { 184 }
152 span:nth-child(1) {}
153 } 185 }
154 } 186 }
155 } 187 }
......
1 <template> 1 <template>
2 <div class="rightcard"> 2 <div class="rightcard">
3 <div class="card bg-shadow"> 3 <div class="card1 cardCon d-center">
4 <div class="cardhead">房屋情况统计表</div> 4 <div class="cardhead">房屋情况统计表</div>
5 <div class="cardcontent"> 5 <div class="cardcontent" style="margin-top: 50px">
6 <el-table class="bueatyScroll" 6 <dv-scroll-board :config="config" class="board" />
7 :header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
8 :cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
9 ref="tableref" height="250px" style="width: 100%">
10 <el-table-column type="index" label="序号" />
11 <el-table-column prop="use" label="用途" />
12 <el-table-column prop="property" label="性质" />
13 <el-table-column prop="area" label="面积" />
14 </el-table>
15 </div> 7 </div>
16 </div> 8 </div>
17 <div class="card bg-shadow"> 9 <div class="card2 cardCon mt-10">
18 <div class="cardhead">登记业务量</div> 10 <div class="cardhead">登记业务量</div>
19 <Rose /> 11 <Rose />
20 </div> 12 </div>
21 <div class="card bg-shadow"> 13 <div class="card3 cardCon mt-10">
22 <div class="cardhead">登记类型总量</div> 14 <div class="cardhead">登记类型总量</div>
23 <columnarsmat /> 15 <columnarsmat />
24 </div> 16 </div>
...@@ -31,114 +23,88 @@ import Rose from "@/components/echart/Rose"; ...@@ -31,114 +23,88 @@ import Rose from "@/components/echart/Rose";
31 export default { 23 export default {
32 data () { 24 data () {
33 return { 25 return {
34 tableData: [{ 26 config: {
35 use: '居住', 27 headerBGC: '#016AC5',
36 property: '住宅', 28 oddRowBGC: '#154295',
37 area: '120' 29 evenRowBGC: '#154295',
38 }, { 30 header: ['序号', '行政区名称', '行政区总数', '接入量'],
39 use: '水果店', 31 data: [
40 property: '商铺', 32 ['1', '咸阳市', '6', '998'],
41 area: '342' 33 ['1', '咸阳市', '6', '998'],
42 }, { 34 ['1', '咸阳市', '6', '998'],
43 use: '商场', 35 ['1', '咸阳市', '6', '998'],
44 property: '商业', 36 ['1', '咸阳市', '6', '998'],
45 area: '2343' 37 ['1', '咸阳市', '6', '998'],
46 }, { 38 ]
47 use: '耕地', 39 }
48 property: '农田', 40 }
49 area: '29987'
50 }, {
51 use: '林场',
52 property: '林地',
53 area: '67894'
54 }, {
55 use: '旅游',
56 property: '旅游区',
57 area: '22328'
58 }, {
59 use: '政府',
60 property: '建筑用地',
61 area: '1228'
62 }, {
63 use: '学校',
64 property: '建筑用地',
65 area: '2328'
66 }, {
67 use: '采矿',
68 property: '矿场',
69 area: '2328'
70 }]
71 };
72 }, 41 },
73 components: { columnarsmat, Rose }, 42 components: { columnarsmat, Rose },
74 mounted () { 43 mounted () {
75 scroll(tableref.value.$refs.bodyWrapper);//设置滚动 44 scroll(tableref.value.$refs.bodyWrapper);//设置滚动
76 }, 45 }
77 beforeDestroy () { }, 46 }
78 };
79 </script> 47 </script>
80
81 <style lang="scss" scoped> 48 <style lang="scss" scoped>
49 /deep/.row-item:not(:last-child) {
50 margin-bottom: 5px;
51 }
52
82 .rightcard { 53 .rightcard {
54 display: flex;
55 flex-direction: column;
56
83 .cardhead { 57 .cardhead {
84 width: 100%; 58 font-size: 20px;
85 height: 40px; 59 font-weight: bold;
86 margin-left: 10px; 60 color: #02D9FD;
87 line-height: 40px; 61 text-align: center;
88 color: rgb(27, 185, 206); 62 position: absolute;
89 font-size: 26px; 63 left: 0;
64 right: 0;
65 top: 15px;
66 text-align: center;
90 } 67 }
91 68
92 .cardcontent { 69 .cardcontent {
93 width: 100%; 70 width: 100%;
94 height: 250px; 71 height: 250px;
72 }
95 73
96 /deep/.el-table tr:nth-child(even) { 74 .cardCon {
97 background-color: #043d72 !important; 75 padding: 20px 10px;
98 } 76 position: relative;
99 77 text-align: center;
100 /deep/.el-table__body-wrapper { 78 width: 100%;
101 background-color: #043d72 79 }
102 }
103
104 /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
105 /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
106 background: #043d72
107 }
108
109 /* 非斑马纹颜色 */
110 /deep/.el-table tr {
111 background: #043d72
112 }
113
114 /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
115 /deep/.el-table td,
116 .building-top .el-table th.is-leaf {
117 border: none;
118 color: white;
119 }
120
121 /* 这里是滑过斑马纹滑过时的颜色 */
122 /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
123 background-color: #021c55;
124 }
125
126 .el-table {
127 --el-table-border: 0px;
128 --el-table-border-color: rgb(0 0 0 / 0%);
129 80
130 } 81 .card1 {
82 height: 240px;
83 background: url("~@/image/homeLeftBg.png") no-repeat;
84 background-size: 100% 100%;
131 85
132 /deep/.el-table .el-table__cell { 86 .board {
133 padding: 6px 0; 87 width: 90%;
88 margin: 0 auto;
89 height: 165px;
90 margin-top: 40px;
134 } 91 }
92 }
135 93
94 .card2 {
95 background: url("~@/image/djywl.png") no-repeat;
96 background-size: 100% 100%;
97 padding: 70px 0 20px 0;
136 } 98 }
137 99
138 .card { 100 .card3 {
139 width: 100%; 101 height: 170px;
140 height: 300px; 102 background: url("~@/image/lxzl.png") no-repeat;
103 background-size: 100% 100%;
141 } 104 }
142 105
106 .cardhead {
107 position: absolute;
108 }
143 } 109 }
144 </style> 110 </style>
......
...@@ -41,12 +41,11 @@ export default { ...@@ -41,12 +41,11 @@ export default {
41 41
42 <style scoped lang="scss"> 42 <style scoped lang="scss">
43 .content { 43 .content {
44 width: 98%; 44 width: 100%;
45 height: calc(100% -94px); 45 height: calc(100% -94px);
46 margin: auto; 46 margin: auto;
47 display: flex; 47 display: flex;
48 display: flex; 48 justify-content: space-between;
49
50 .centercard { 49 .centercard {
51 width: 40%; 50 width: 40%;
52 51
......