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 917 additions and 309 deletions
1 <template>
2 <div>
3 <!-- 折线图 -->
4 <Echart
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template>
12
13 <script>
14 import Echart from "@/common/echart";
15 export default {
16 data() {
17 return {
18
19 xAxisData:{},
20 yAxisData1:{},
21 yAxisData2:{},
22 yAxisData3:{},
23 options: {},
24 };
25 },
26 components: {
27 Echart,
28 },
29 props: {
30 cdata: {
31 type: Object,
32 default: () => ({}),
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 },
68 // calculable: true,
69 tooltip: {
70 trigger: "axis",
71 formatter: function(params) {
72 let html = '';
73 params.forEach(v => {
74 console.log(v)
75 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
76 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span>
77 ${v.seriesName}.${v.name}
78 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
79 个`;
80 })
81
82
83
84 return html
85 },
86 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
87
88 },
89 // grid: {
90 // top: 70,
91 // containLabel: true
92 // },
93 grid: {
94 top: "20%",
95 left: "3%",
96 right: "6%",
97 bottom: "8%",
98 containLabel: true,
99 },
100 xAxis: [{
101 type: 'category',
102 axisTick: {
103 show: false
104 },
105 axisLine: {
106 show: true,
107 lineStyle: {
108 type: "dashed",
109 color: "rgba(255, 255, 255,0.5)"
110 }
111 },
112 axisLabel: {
113 inside: false,
114 textStyle: {
115 color: 'rgba(255, 255, 255,0.7)', // x轴颜色
116 fontWeight: 'normal',
117 fontSize: '12',
118 lineHeight: 22
119 }
120 },
121
122 data: this.xAxisData
123 }],
124 yAxis: [{
125 type: "value",
126 axisLabel: {
127 textStyle: {
128 color: "rgba(255, 255, 255,0.7)"
129 }
130 },
131 splitLine: {
132 show: false,
133 lineStyle: {
134 type: "dashed",
135 color: "rgba(255, 255, 255,0.5)"
136 }
137 },
138 axisLine: {
139 show: true,
140 lineStyle: {
141 type: "dashed",
142 color: "rgba(255, 255, 255,0.5)"
143 }
144 },
145 axisTick: {
146 show: false
147 }
148 }],
149 series: [{
150 name: newData.legendItem[0],
151 type: "line",
152 smooth: false, //是否平滑
153 // showSymbol: false,/
154 symbolSize: 6,
155 zlevel: 3,
156 lineStyle: {
157 normal: {
158 color: newData.color[0],
159 shadowBlur: 3,
160 shadowColor: this.hexToRgba(newData.color[0], 0.5),
161 shadowOffsetY: 0
162 }
163 },
164 data: this.yAxisData1
165 }, {
166 name: newData.legendItem[1],
167 type: "line",
168 smooth: false,
169 // showSymbol: false,
170 symbolSize: 8,
171 zlevel: 3,
172 lineStyle: {
173 normal: {
174 color: newData.color[1],
175 shadowBlur: 0,
176 shadowColor: this.hexToRgba(newData.color[1], 0.5),
177 shadowOffsetY: 0
178 }
179 },
180 data: this.yAxisData2
181 },
182 {
183 name: newData.legendItem[2],
184 type: "line",
185 smooth: false,
186 // showSymbol: false,
187 symbolSize: 8,
188 zlevel: 3,
189 lineStyle: {
190 normal: {
191 color: newData.color[2],
192 shadowBlur: 3,
193 shadowColor: this.hexToRgba(newData.color[2], 0.5),
194 shadowOffsetY: 0
195 }
196 },
197 data: this.yAxisData3
198 }
199 ]
200 };
201 },
202 immediate: true,
203 deep: true,
204 },
205 },
206 };
207 </script>
1 <template>
2 <div>
3 <Chart :cdata="cdata"/>
4 </div>
5 </template>
6
7 <script>
8 import Chart from './chart.vue'
9 export default {
10 data () {
11 return {
12 cdata: {
13 legendItem :['接入','上报','登簿'],
14 color : [
15 "#0090FF",
16 "#EE8931",
17 "#8B5CFF"
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 ],
92
93 }
94 };
95 },
96 components: {
97 Chart,
98 },
99 mounted () {
100
101 },
102 methods: {
103
104 }
105 };
106 </script>
107
108 <style lang="scss" scoped></style>
1 <template>
2 <div>
3 <Echart
4 :options="options"
5 id="centreLeft1Chart"
6 height="220px"
7 width="459px"
8 ></Echart>
9 </div>
10 </template>
11
12 <script>
13 import Echart from '@/common/echart'
14 export default {
15 data () {
16 return {
17 options: {},
18 };
19 },
20 components: {
21 Echart,
22 },
23 props: {
24 cdata: {
25 type: Object,
26 default: () => ({})
27 },
28 },
29 watch: {
30 cdata: {
31 handler (newData) {
32 this.options = {
33 grid: {
34 // 让图表占满容器
35 top: "0%",
36 left: "1%",
37 right: "30%",
38 bottom: "0%",
39 },
40 color: [
41 "#37a2da",
42 "#32c5e9",
43 "#9fe6b8",
44 "#ffdb5c",
45 "#ff9f7f",
46 "#fb7293",
47 "#e7bcf3",
48 "#8378ea"
49 ],
50 tooltip: {
51 trigger: "item",
52 formatter: "{a} <br/>{b} : {c} ({d}%)"
53 },
54 toolbox: {
55 show: true
56 },
57 calculable: true,
58
59 series: [
60 {
61 name: "业务量",
62 type: "pie",
63 radius: [30, 80],
64 roseType: "area",
65 data: newData.seriesData
66 }
67 ]
68 }
69 },
70 immediate: true,
71 deep: true
72 }
73 }
74 };
75 </script>
76
77 <style lang="scss" scoped>
78 </style>
1 <template>
2 <div>
3 <Chart :cdata="cdata" />
4
5 <div class="rotograph">佛坪县</div>
6 </div>
7 </template>
8
9 <script>
10 import Chart from './chart.vue';
11 export default {
12 data () {
13 return {
14 cdata: {
15 seriesData: [
16 { value: 10, name: "土地所有权" },
17 { value: 5, name: "建设用地、宅基地使用权" },
18 { value: 15, name: "房地产权（项目内多幢房屋）" },
19 { value: 25, name: "产地产权（独幢、层、套、间、房屋）" },
20 { value: 20, name: "建筑物区分所有权业主共有部分" },
21 { value: 35, name: "海域（含无居民海岛）使用权" },
22 { value: 10, name: "构（建）筑物所有权" },
23 { value: 5, name: "农用地使用权（非林地）" },
24 { value: 15, name: "林权" },
25 { value: 25, name: "注销登记" },
26 { value: 20, name: "异议登记" },
27 { value: 35, name: "预告登记" },
28 { value: 20, name: "查封登记" },
29 { value: 35, name: "抵押权登记" },
30 { value: 20, name: "地役权登记" }
31 ]
32 }
33 }
34 },
35 components: {
36 Chart,
37 },
38 mounted () {
39 },
40 methods: {
41 }
42 }
43 </script>
44
45 <style lang="scss" scoped>
46 .rotograph{
47 margin: auto;
48 width:200px;
49 height: 30px;
50 background-color: rgb(6, 121, 167);
51 font-size: 20px;
52 line-height: 30px;
53 text-align: center;
54 border-radius: 6px;
55 font-weight: 600;
56 }
57 </style>
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- 年度开工率 --> 3 <!-- 柱状图 -->
4 <Echart 4 <Echart
5 :options="options" 5 :options="options"
6 id="bottomLeftChart" 6 id="bottomLeftChart"
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
11 </template> 11 </template>
12 12
13 <script> 13 <script>
14 import Echart from '@/common/echart' 14 import Echart from "@/common/echart";
15 export default { 15 export default {
16 data () { 16 data() {
17 return { 17 return {
18 options: {}, 18 options: {},
19 }; 19 };
...@@ -24,106 +24,105 @@ export default { ...@@ -24,106 +24,105 @@ export default {
24 props: { 24 props: {
25 cdata: { 25 cdata: {
26 type: Object, 26 type: Object,
27 default: () => ({}) 27 default: () => ({}),
28 }, 28 },
29 }, 29 },
30 watch: { 30 watch: {
31 cdata: { 31 cdata: {
32 handler (newData) { 32 handler(newData) {
33 this.options = { 33 this.options = {
34 legend: { 34 legend: {
35 data: ['资产原值', '累计折旧'], 35 data: ["成功", "失败"],
36 textStyle: { 36 textStyle: {
37 color: "#B4B4B4" 37 color: "#B4B4B4",
38 }, 38 },
39 top: "0%" 39 top: "1%",
40 right: "1%",
40 }, 41 },
41 grid: { 42 grid: {
42 left: '3%', 43 left: "3%",
43 right: '4%', 44 right: "6%",
44 bottom: '3%', 45 bottom: "8%",
45 containLabel: true 46 containLabel: true,
46 }, 47 },
47 xAxis: { 48 xAxis: {
48 type: 'value', 49 type: "value",
49 splitLine: {show: false}, 50 splitLine: { show: false },
50 axisTick: { show: false }, 51 axisTick: { show: false },
51 axisLine: { 52 axisLine: {
52 show: true, 53 show: true,
53 lineStyle:{ 54 lineStyle: {
54 color:'#01F3F5' 55 color: "#01F3F5",
55 }, 56 },
56 }, 57 },
57 axisLabel: { 58 axisLabel: {
58 show:true, 59 show: true,
59 textStyle:{ 60 textStyle: {
60 color:'#01F3F5', 61 color: "#01F3F5",
61 fontSize:12, 62 fontSize: 12,
63 },
62 }, 64 },
63 rotate:30
64 }
65
66 }, 65 },
67 yAxis: { 66 yAxis: {
68 type: 'category', 67 type: "category",
69 data: ['房屋','建筑物','机械设备','运输工具'], 68 data: newData.category,
70 splitLine: {show: false}, 69 splitLine: { show: false },
71 axisTick: { show: false }, 70 axisTick: { show: false },
72 axisLine: { 71 axisLine: {
73 show: true, 72 show: true,
74 lineStyle:{ 73 lineStyle: {
75 color:'#01F3F5' 74 color: "#01F3F5",
76 } 75 },
77 }, 76 },
78 }, 77 },
79 78
80 series: [ 79 series: [
81 { 80 {
82 name: '资产原值', 81 name: "成功",
83 type: 'bar', 82 type: "bar",
84 stack: '总量', 83 stack: "总量",
85 barWidth: 30, 84 barWidth: 30,
86 itemStyle:{ 85 itemStyle: {
87 normal: { 86 normal: {
88 color: '#6601FF', 87 color: "#6601FF",
89 } 88 },
90 }, 89 },
91 label: { 90 label: {
92 normal: { 91 normal: {
93 show: true, 92 show: true,
94 position: 'insideRight' 93 position: "insideRight",
95 } 94 },
96 }, 95 },
97 z: 10, 96 z: 10,
98 data: [320, 302, 301, 543] 97 data: newData.barData,
99 }, 98 },
100 { 99 {
101 name: '累计折旧', 100 name: "失败",
102 type: 'bar', 101 type: "bar",
103 stack: '总量', 102 stack: "总量",
104 itemStyle:{ 103 itemStyle: {
105 normal: { 104 normal: {
106 color: '#00F0FF' 105 color: "#00F0FF",
107 } 106 },
108 }, 107 },
109 label: { 108 label: {
110 normal: { 109 normal: {
111 show: true, 110 show: true,
112 position: 'insideRight', 111 position: "insideRight",
113 textStyle:{ 112 textStyle: {
114 color:'#6601FF' 113 color: "#6601FF",
115 } 114 },
116 } 115 },
117 }, 116 },
118 z: 5, 117 z: 5,
119 data: [90, 230, 210, 432] 118 data: newData.lineData,
120 }, 119 },
121 ] 120 ],
122 } 121 };
123 }, 122 },
124 immediate: true, 123 immediate: true,
125 deep: true 124 deep: true,
126 }, 125 },
127 }, 126 },
128 } 127 };
129 </script> 128 </script>
......
...@@ -18,102 +18,40 @@ export default { ...@@ -18,102 +18,40 @@ export default {
18 "西乡县", 18 "西乡县",
19 "勉县", 19 "勉县",
20 "宁强县", 20 "宁强县",
21 "永川", 21 "略阳县",
22 "璧山", 22 "镇巴县",
23 "江津", 23 "留坝县",
24 "城口", 24 "佛坪县",
25 "大足", 25
26 "垫江",
27 "丰都",
28 "奉节",
29 "合川",
30 "江津区",
31 "开州",
32 "南川",
33 "彭水",
34 "黔江",
35 "石柱",
36 "铜梁",
37 "潼南",
38 "巫山",
39 "巫溪",
40 "武隆",
41 "秀山",
42 "酉阳",
43 "云阳",
44 "忠县",
45 "川东",
46 "检修"
47 ], 26 ],
48 lineData: [ 27 lineData: [
49 18092,
50 20728,
51 24045,
52 28348,
53 32808,
54 36097,
55 39867,
56 44715, 28 44715,
57 48444, 29 48444,
58 50415, 30 50415,
59 56061, 31 56061,
60 62677,
61 59521,
62 67560,
63 18092, 32 18092,
64 20728, 33 20728,
65 24045, 34 24045,
66 28348, 35 28348,
67 32808, 36 32808,
68 36097, 37 36097,
69 39867, 38 39867
70 44715, 39
71 48444, 40
72 50415, 41
73 36097,
74 39867,
75 44715,
76 48444,
77 50415,
78 50061,
79 32677,
80 49521,
81 32808
82 ], 42 ],
83 barData: [ 43 barData: [
84 4600,
85 5000,
86 5500,
87 6500,
88 7500,
89 8500, 44 8500,
90 9900, 45 9900,
91 12500, 46 12500,
92 14000, 47 14000,
93 21500, 48 21500,
94 23200,
95 24450,
96 25250,
97 33300,
98 4600, 49 4600,
99 5000, 50 5000,
100 5500, 51 5500,
101 6500, 52 6500,
102 7500, 53 7500,
103 8500,
104 9900,
105 22500,
106 14000,
107 21500,
108 8500,
109 9900,
110 12500,
111 14000,
112 21500,
113 23200, 54 23200,
114 24450,
115 25250,
116 7500
117 ], 55 ],
118 rateData: [] 56 rateData: []
119 } 57 }
...@@ -131,4 +69,5 @@ export default { ...@@ -131,4 +69,5 @@ export default {
131 </script> 69 </script>
132 70
133 <style lang="scss" scoped> 71 <style lang="scss" scoped>
72
134 </style> 73 </style>
......
1 <template>
2 <div>
3 <!-- 柱状图 -->
4 <Echart
5 :options="options"
6 id="bottomLeftChart"
7 height="300px"
8 width="100%"
9 ></Echart>
10 </div>
11 </template>
12
13 <script>
14 import Echart from "@/common/echart";
15 export default {
16 data() {
17 return {
18 options: {},
19 };
20 },
21 components: {
22 Echart,
23 },
24 props: {
25 cdata: {
26 type: Object,
27 default: () => ({}),
28 },
29 },
30 watch: {
31 cdata: {
32 handler(newData) {
33 this.options ={
34 grid: {
35 // 让图表占满容器
36 top: "12%",
37 left: "15%",
38 right: "10%",
39 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 },
55 },
56 },
57 yAxis: {
58 splitLine: {
59 show: false,
60 },
61 axisLine: {
62 show: true,
63 lineStyle: {
64 color: "rgba(95, 180, 237, 0.32)",
65 },
66 },
67 axisTick: {
68 show: false,
69 },
70 axisLabel: {
71 color: "#ffff",
72 },
73 },
74 series: [
75 {
76 // 顶部圆片
77 type: "pictorialBar",
78 animation: false,
79 itemStyle: {
80 color: "rgba(115, 240, 252, 1)",
81 },
82 symbolRepeat: false,
83 symbolSize: [15, 8],
84 symbolMargin: 1,
85 z: 10,
86 data: newData.lineData,
87 symbolPosition: "end",
88 symbolOffset: [0, -4],
89 },
90 {
91 // 底部圆片
92 type: "pictorialBar",
93 animation: false,
94
95 itemStyle: {
96 color: "rgba(50, 96, 225, 0.8)",
97 },
98 symbolRepeat: false,
99 symbolSize: [15, 8],
100 symbolMargin: 1,
101 z: 10,
102 data: newData.lineData,
103 symbolPosition: "start",
104 symbolOffset: [0, 3],
105 },
106 {
107 barWidth: 15,
108 animation: false,
109
110 type: "bar",
111 label: {
112 show: true,
113 position: "top",
114 textStyle: {
115 color: "#ffff",
116 },
117 },
118 itemStyle: {
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 },
129 immediate: true,
130 deep: true,
131 },
132 },
133 };
134 </script>
1 <template>
2 <div>
3 <Chart :cdata="cdata" />
4 </div>
5 </template>
6
7 <script>
8 import Chart from './chart.vue'
9 export default {
10 data () {
11 return {
12 cdata: {
13 category: [
14 "首次",
15 "转移",
16 "变更",
17 "注销",
18 "更正",
19 "异议",
20 "预告",
21 "查封",
22 "其他",
23
24 ],
25 lineData: [
26 14715,
27 8444,
28 10415,
29 6061,
30 18092,
31 12728,
32 9045,
33 8348,
34 20008,
35 ],
36 }
37 };
38 },
39 components: {
40 Chart,
41 },
42 mounted () {
43 },
44 methods: {
45
46 }
47 };
48 </script>
49
50 <style lang="scss" scoped>
51 </style>
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- 地图 -->
3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px" 4 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px"
4 :options="options"></Echart> 5 :options="options"></Echart>
5 </div> 6 </div>
......
...@@ -138,6 +138,17 @@ div:focus { ...@@ -138,6 +138,17 @@ div:focus {
138 .fl { 138 .fl {
139 float: left; 139 float: left;
140 } 140 }
141 // 大屏阴影
142 // 大屏图表背景
143 .bg-shadow{
144 background-color: rgb(4, 61, 114)!important;
145 box-shadow:0px 0px 4px 6px rgb(4, 61, 114),
146 inset 0px 0px 16px 0px rgb(3, 49, 87);
147 box-sizing: border-box;
148 background: url("~@/image/tablebk.png") no-repeat;
149 background-size: 100% 100%;
150 }
151
141 152
142 .pr-5 { 153 .pr-5 {
143 padding-right: 5px; 154 padding-right: 5px;
...@@ -411,3 +422,5 @@ aside { ...@@ -411,3 +422,5 @@ aside {
411 .item-cwnr img { 422 .item-cwnr img {
412 height: 30px; 423 height: 30px;
413 } 424 }
425
426
......
1 <template> 1 <template>
2 <div class="centercard"> 2 <div class="centercard">
3 <div class="card1"> 3 <div class="card1 bg-shadow">
4 <CenterLeft2Chart class="map" /> 4 <maps class="map" />
5 </div>
6 <div class="card2 bg-shadow">
7 <Brokenline class="Brokenline" />
5 </div> 8 </div>
6 <div class="card2"></div>
7 </div> 9 </div>
8 </template> 10 </template>
9 11
10 <script> 12 <script>
11 import CenterLeft2Chart from "@/components/echart/map"; 13 import maps from "@/components/echart/map";
14 import Brokenline from "@/components/echart/Brokenline";
12 export default { 15 export default {
13 data() { 16 data() {
14 return {}; 17 return {};
15 }, 18 },
16 components: { CenterLeft2Chart }, 19 components: { maps,Brokenline },
17 mounted() {}, 20 mounted() {},
18 beforeDestroy() {}, 21 beforeDestroy() {},
19 methods: {}, 22 methods: {},
...@@ -27,16 +30,22 @@ export default { ...@@ -27,16 +30,22 @@ export default {
27 .card1{ 30 .card1{
28 width: 100%; 31 width: 100%;
29 height: 600px; 32 height: 600px;
30 box-sizing: border-box; 33
31 background: url("~@/image/tablebk.png") no-repeat; 34 .map{
32 background-size: 100% 100%; 35 margin: auto;
36 width: 95%;
37 height: 600px;
38 }
33 } 39 }
34 .card2{ 40 .card2{
35 width: 100%; 41 width: 100%;
36 height: 300px; 42 height: 300px;
37 box-sizing: border-box; 43
38 background: url("~@/image/tablebk.png") no-repeat; 44 .Brokenline{
39 background-size: 100% 100%; 45 margin: auto;
46 width: 100%;
47 height: 300px;
48 }
40 } 49 }
41 } 50 }
42 </style> 51 </style>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 } 6 }
7 #index { 7 #index {
8 color: #d3d6dd; 8 color: #d3d6dd;
9 width:2150px; 9 width: 1920px;
10 height: 1080px; 10 height: 1080px;
11 position: absolute; 11 position: absolute;
12 top: 50%; 12 top: 50%;
......
...@@ -26,11 +26,8 @@ ...@@ -26,11 +26,8 @@
26 <dv-decoration-10 class="dv-dec-10-s" /> 26 <dv-decoration-10 class="dv-dec-10-s" />
27 </div> 27 </div>
28 </div> 28 </div>
29 <div class="content"> 29 <screencontent/>
30 <leftcard/> 30
31 <centercard/>
32 <rightcard/>
33 </div>
34 </div> 31 </div>
35 </div> 32 </div>
36 </div> 33 </div>
...@@ -38,9 +35,7 @@ ...@@ -38,9 +35,7 @@
38 </template> 35 </template>
39 <script> 36 <script>
40 import drawMixin from "../../utils/drawMixin"; 37 import drawMixin from "../../utils/drawMixin";
41 import leftcard from './leftcard' 38 import screencontent from './screencontent'
42 import centercard from './centercard'
43 import rightcard from './rightcard'
44 export default { 39 export default {
45 mixins: [drawMixin], 40 mixins: [drawMixin],
46 data() { 41 data() {
...@@ -49,7 +44,7 @@ export default { ...@@ -49,7 +44,7 @@ export default {
49 }; 44 };
50 }, 45 },
51 components: { 46 components: {
52 leftcard,centercard,rightcard 47 screencontent
53 }, 48 },
54 mounted() { 49 mounted() {
55 // this.timeFn(); 50 // this.timeFn();
......
1 <template> 1 <template>
2 <div class="leftcard"> 2 <div class="leftcard">
3 <div class="card1"> 3 <div class="card1 bg-shadow">
4 <div class="cardhead">区县接入</div> 4 <div class="cardhead">区县接入</div>
5 <div class="cardcontent"> 5 <div class="cardcontent">
6 <div class="text1"> 6 <div class="text1">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 <div class="card2"> 20 <div class="card2 bg-shadow">
21 <div class="cardhead">省厅汇交</div> 21 <div class="cardhead">省厅汇交</div>
22 <div class="cardcontent"> 22 <div class="cardcontent">
23 <div class="text1"> 23 <div class="text1">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 <div class="card3"> 37 <div class="card3 bg-shadow">
38 <div class="cardhead">各区县数据上报统计</div> 38 <div class="cardhead">各区县数据上报统计</div>
39 <columnar /> 39 <columnar />
40 </div> 40 </div>
...@@ -44,29 +44,21 @@ ...@@ -44,29 +44,21 @@
44 <script> 44 <script>
45 import columnar from "@/components/echart/columnar"; 45 import columnar from "@/components/echart/columnar";
46 export default { 46 export default {
47
48 data() { 47 data() {
49 return { 48 return {};
50
51 };
52 }, 49 },
53 components: { columnar }, 50 components: { columnar },
54 mounted() { 51 mounted() {},
55 }, 52 beforeDestroy() {},
56 beforeDestroy() { 53 methods: {},
57
58 },
59 methods: {
60
61 },
62 }; 54 };
63 </script> 55 </script>
64 56
65 <style lang="scss" scoped> 57 <style lang="scss" scoped>
66 .leftcard{ 58 .leftcard {
67 width: 25%; 59 width: 25%;
68 height: 100%; 60 height: 100%;
69 .cardhead{ 61 .cardhead {
70 width: 100%; 62 width: 100%;
71 height: 40px; 63 height: 40px;
72 margin-left: 10px; 64 margin-left: 10px;
...@@ -74,75 +66,63 @@ export default { ...@@ -74,75 +66,63 @@ export default {
74 color: rgb(27, 185, 206); 66 color: rgb(27, 185, 206);
75 font-size: 26px; 67 font-size: 26px;
76 } 68 }
77 .cardcontent{ 69 .cardcontent {
78 width: 100%; 70 width: 100%;
79 height: 160px; 71 height: 160px;
80 display: flex; 72 display: flex;
81 .text1{ 73 .text1 {
82 width: 33%; 74 width: 33%;
83 height: 100%; 75 height: 100%;
84 p{ 76 p {
85 height: 70px; 77 height: 70px;
86 line-height: 70px; 78 line-height: 70px;
87 font-size: 40px; 79 font-size: 40px;
88 text-align: center;; 80 text-align: center;
89 81 }
90 }; 82 p:nth-child(2) {
91 p:nth-child(2){
92 color: rgb(180, 178, 178); 83 color: rgb(180, 178, 178);
93
94 };
95 } 84 }
96 .text2{ 85 }
86 .text2 {
97 width: 33%; 87 width: 33%;
98 height: 100%; 88 height: 100%;
99 p{ 89 p {
100 height: 70px; 90 height: 70px;
101 line-height: 70px; 91 line-height: 70px;
102 font-size: 20px; 92 font-size: 20px;
103 text-align: center;; 93 text-align: center;
104 color: rgb(180, 178, 178); 94 color: rgb(180, 178, 178);
105 };
106 } 95 }
107 .text3{ 96 }
97 .text3 {
108 width: 33%; 98 width: 33%;
109 height: 100%; 99 height: 100%;
110 p{ 100 p {
111 height: 70px; 101 height: 70px;
112 line-height: 70px; 102 line-height: 70px;
113 font-size: 20px; 103 font-size: 20px;
114 text-align: center;; 104 text-align: center;
115 color: rgb(180, 178, 178); 105 color: rgb(180, 178, 178);
116 };
117 } 106 }
118 } 107 }
119 .card1{ 108 }
109 .card1 {
120 width: 100%; 110 width: 100%;
121 height: 200px; 111 height: 200px;
122 box-sizing: border-box;
123 background: url("~@/image/tablebk.png") no-repeat;
124 background-size: 100% 100%;
125
126 } 112 }
127 .card2{ 113 .card2 {
128 width: 100%; 114 width: 100%;
129 height: 200px; 115 height: 200px;
130 box-sizing: border-box;
131 background: url("~@/image/tablebk.png") no-repeat;
132 background-size: 100% 100%;
133 } 116 }
134 .card3{ 117 .card3 {
135 width: 100%; 118 width: 100%;
136 height: 500px; 119 height: 500px;
137 box-sizing: border-box; 120
138 background: url("~@/image/tablebk.png") no-repeat; 121 .mainCss {
139 background-size: 100% 100%; 122 width: 450px;
140 .mainCss{ 123 height: 420px;
141 width: 500px;
142 height:445px;
143 background-color: saddlebrown; 124 background-color: saddlebrown;
144 } 125 }
145 } 126 }
146 } 127 }
147
148 </style> 128 </style>
......
1 <template> 1 <template>
2 <div class="leftcard"> 2 <div class="leftcard">
3 <div class="card1"> 3 <div class="card bg-shadow">
4 <div class="cardhead">区县接入</div> 4 <div class="cardhead">房屋情况统计表</div>
5 <div class="cardcontent"> 5 <div class="cardcontent">
6 <div class="text1"> 6 <el-table
7 <p>52343</p> 7 class="bueatyScroll"
8 <p>总量</p> 8 :header-cell-style="{ 'text-align': 'center', background: '#02296d',color:'#ffffff' }"
9 :cell-style="{ 'text-align': 'center' }"
10 :row-style="{ height: '30px' }"
11 :data="tableData"
12 stripe
13 ref="tableref"
14 height="250px"
15 style="width: 100%"
16 >
17 <el-table-column type="index" label="序号" width="100" />
18 <el-table-column prop="use" label="用途" width="100" />
19 <el-table-column prop="property" label="性质" width="120" />
20 <el-table-column prop="area" label="面积" width="130" />
21 </el-table>
9 </div> 22 </div>
10 <div class="text2">
11 <p>666</p>
12 <p>失败</p>
13 </div> 23 </div>
14 <div class="text3"> 24 <div class="card bg-shadow">
15 <p>99%</p> 25 <div class="cardhead">登记业务量</div>
16 <p>成功率</p> 26 <Rose/>
17 </div> 27 </div>
18 </div> 28 <div class="card bg-shadow">
19 </div> 29 <div class="cardhead">登记类型总量</div>
20 <div class="card2"> 30 <columnarsmat/>
21 <div class="cardhead">省厅汇交</div>
22 <div class="cardcontent">
23 <div class="text1">
24 <p>9168</p>
25 <p>总量</p>
26 </div>
27 <div class="text2">
28 <p>45</p>
29 <p>失败</p>
30 </div>
31 <div class="text3">
32 <p>99%</p>
33 <p>成功率</p>
34 </div>
35 </div>
36 </div>
37 <div class="card3">
38 <div class="cardhead">各区县数据上报统计</div>
39 <div class="mainCss" ref="myRef"></div>
40
41 </div> 31 </div>
42 </div> 32 </div>
43 </template> 33 </template>
44 34
45 <script> 35 <script>
46 import CenterLeft2Chart from "@/components/echart/map"; 36 import columnarsmat from "@/components/echart/columnarsmat";
37 import Rose from "@/components/echart/Rose";
47 export default { 38 export default {
48
49 data() { 39 data() {
50 return { 40 return {
51 41 tableData: [{
42 use:'居住',
43 property: '住宅',
44 area: '120'
45 }, {
46 use: '水果店',
47 property: '商铺',
48 area: '342'
49 }, {
50 use: '商场',
51 property: '商业',
52 area: '2343'
53 }, {
54 use: '耕地',
55 property: '农田',
56 area: '29987'
57 }, {
58 use: '林场',
59 property: '林地',
60 area: '67894'
61 }, {
62 use: '旅游',
63 property: '旅游区',
64 area: '22328'
65 }, {
66 use: '政府',
67 property: '建筑用地',
68 area: '1228'
69 }, {
70 use: '学校',
71 property: '建筑用地',
72 area: '2328'
73 }, {
74 use: '采矿',
75 property: '矿场',
76 area: '2328'
77 }]
52 }; 78 };
53 }, 79 },
54 components: { CenterLeft2Chart }, 80 components: { columnarsmat,Rose },
55 mounted() { 81 mounted() {
82 scroll(tableref.value.$refs.bodyWrapper);//设置滚动
56 }, 83 },
57 beforeDestroy() { 84 beforeDestroy() {},
58
59 },
60 methods: { 85 methods: {
61 86
62 }, 87 },
...@@ -64,10 +89,10 @@ export default { ...@@ -64,10 +89,10 @@ export default {
64 </script> 89 </script>
65 90
66 <style lang="scss" scoped> 91 <style lang="scss" scoped>
67 .leftcard{ 92 .leftcard {
68 width: 25%; 93 width: 25%;
69 height: 100%; 94 height: 100%;
70 .cardhead{ 95 .cardhead {
71 width: 100%; 96 width: 100%;
72 height: 40px; 97 height: 40px;
73 margin-left: 10px; 98 margin-left: 10px;
...@@ -75,82 +100,50 @@ export default { ...@@ -75,82 +100,50 @@ export default {
75 color: rgb(27, 185, 206); 100 color: rgb(27, 185, 206);
76 font-size: 26px; 101 font-size: 26px;
77 } 102 }
78 .cardcontent{ 103 .cardcontent {
79 width: 100%; 104 width: 450px;
80 height: 160px; 105 height: 250px;
81 display: flex; 106 /deep/.el-table tr:nth-child(even){
82 .text1{ 107 background-color: #043d72!important;
83 width: 33%; 108 }
84 height: 100%; 109 /deep/.el-table__body-wrapper {
85 p{ 110 background-color: #043d72
86 height: 70px; 111 }
87 line-height: 70px; 112 /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
88 font-size: 40px; 113 /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
89 text-align: center;; 114 background: #043d72
90 115 }
91 };
92 p:nth-child(2){
93 color: rgb(180, 178, 178);
94 116
95 }; 117 /* 非斑马纹颜色 */
118 /deep/.el-table tr {
119 background: #043d72
96 } 120 }
97 .text2{
98 width: 33%;
99 height: 100%;
100 p{
101 height: 70px;
102 line-height: 70px;
103 font-size: 20px;
104 text-align: center;;
105 color: rgb(180, 178, 178);
106 };
107 p:nth-child(2){
108 color: rgb(180, 178, 178);
109 121
110 }; 122 /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
123 /deep/.el-table td,
124 .building-top .el-table th.is-leaf {
125 border: none;
126 color: white;
111 } 127 }
112 .text3{
113 width: 33%;
114 height: 100%;
115 p{
116 height: 70px;
117 line-height: 70px;
118 font-size: 20px;
119 text-align: center;;
120 color: rgb(180, 178, 178);
121 };
122 p:nth-child(2){
123 128
129 /* 这里是滑过斑马纹滑过时的颜色 */
130 /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
131 background-color: #021c55;
132 }
133 .el-table{
134 --el-table-border:0px;
135 --el-table-border-color:rgb(0 0 0 / 0%);
124 136
125 };
126 } 137 }
138 /deep/.el-table .el-table__cell {
139 padding: 6px 0;
127 } 140 }
128 .card1{
129 width: 100%;
130 height: 200px;
131 box-sizing: border-box;
132 background: url("~@/image/tablebk.png") no-repeat;
133 background-size: 100% 100%;
134 141
135 } 142 }
136 .card2{ 143 .card{
137 width: 100%;
138 height: 200px;
139 box-sizing: border-box;
140 background: url("~@/image/tablebk.png") no-repeat;
141 background-size: 100% 100%;
142 }
143 .card3{
144 width: 100%; 144 width: 100%;
145 height: 500px; 145 height: 300px;
146 box-sizing: border-box;
147 background: url("~@/image/tablebk.png") no-repeat;
148 background-size: 100% 100%;
149 .mainCss{
150 width: 500px;
151 height:445px;
152 background-color: saddlebrown;
153 }
154 }
155 } 146 }
147
148 }
156 </style> 149 </style>
......
1 <template>
2 <div class="content">
3 <leftcard />
4 <centercard />
5 <rightcard />
6 </div>
7 </template>
8 <script>
9 import drawMixin from "../../utils/drawMixin";
10 import leftcard from "./leftcard";
11 import centercard from "./centercard";
12 import rightcard from "./rightcard";
13 export default {
14 mixins: [drawMixin],
15 data() {
16 return {
17 decorationColor: ["#568aea", "#568aea"],
18 };
19 },
20 components: {
21 leftcard,
22 centercard,
23 rightcard,
24 },
25 mounted() {
26 // this.timeFn();
27 this.cancelLoading();
28 },
29 beforeDestroy() {
30 clearInterval(this.timing);
31 },
32 methods: {
33 cancelLoading() {
34 setTimeout(() => {
35 this.loading = false;
36 }, 500);
37 },
38 },
39 };
40 </script>
41
42 <style scoped lang="scss">
43 @import "./index.scss";
44 </style>