Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
539f1163 by 田浩浩
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web

2 parents 8d082856 94436f1e
Inline Side-by-side
Showing 20 changed files with 930 additions and 339 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,91 @@ export default { ...@@ -24,106 +24,91 @@ 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: "5%",
43 right: '4%', 44 right: "7%",
44 bottom: '3%', 45 bottom: "10%",
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: 20,
86 itemStyle:{ 85 itemStyle: {
87 normal: { 86 normal: {
88 color: '#6601FF', 87 color: "#6601FF",
89 }
90 }, 88 },
91 label: {
92 normal: {
93 show: true,
94 position: 'insideRight'
95 }
96 }, 89 },
90
97 z: 10, 91 z: 10,
98 data: [320, 302, 301, 543] 92 data: newData.barData,
99 }, 93 },
100 { 94 {
101 name: '累计折旧', 95 name: "失败",
102 type: 'bar', 96 type: "bar",
103 stack: '总量', 97 stack: "总量",
104 itemStyle:{ 98 itemStyle: {
105 normal: { 99 normal: {
106 color: '#00F0FF' 100 color: "#00F0FF",
107 }
108 }, 101 },
109 label: {
110 normal: {
111 show: true,
112 position: 'insideRight',
113 textStyle:{
114 color:'#6601FF'
115 }
116 }
117 }, 102 },
118 z: 5, 103 z: 5,
119 data: [90, 230, 210, 432] 104 data: newData.lineData,
120 }, 105 },
121 ] 106 ],
122 } 107 };
123 }, 108 },
124 immediate: true, 109 immediate: true,
125 deep: true 110 deep: true,
126 }, 111 },
127 }, 112 },
128 } 113 };
129 </script> 114 </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>
......

14.2 KB | W: | H:

44.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -45,6 +45,8 @@ export default { ...@@ -45,6 +45,8 @@ export default {
45 45
46 .menubg { 46 .menubg {
47 height: 34px; 47 height: 34px;
48 width: 130px;
49 text-align: center;
48 color: #FFFFFF; 50 color: #FFFFFF;
49 margin-right: 20px; 51 margin-right: 20px;
50 background: url('~@/image/navbar.png') no-repeat; 52 background: url('~@/image/navbar.png') no-repeat;
...@@ -68,15 +70,16 @@ export default { ...@@ -68,15 +70,16 @@ export default {
68 font-size: 14px; 70 font-size: 14px;
69 } 71 }
70 72
71 .sidebarLeft, 73 .sidebarLeft {
72 .sidebarRight {
73 position: relative; 74 position: relative;
74 top: 13px; 75 top: 13px;
76 left: 10px;
75 } 77 }
76 78
77 .sidebarRight { 79 .sidebarRight {
78 position: relative; 80 position: relative;
79 left: 25px; 81 left: 10px;
82 top: 13px;
80 } 83 }
81 84
82 // 导航选中背景色 85 // 导航选中背景色
...@@ -119,7 +122,7 @@ export default { ...@@ -119,7 +122,7 @@ export default {
119 color: #FFFFFF; 122 color: #FFFFFF;
120 position: absolute; 123 position: absolute;
121 right: 20px; 124 right: 20px;
122 top: -1px; 125 top: 0;
123 cursor: pointer; 126 cursor: pointer;
124 127
125 .closeStyle { 128 .closeStyle {
...@@ -130,7 +133,7 @@ export default { ...@@ -130,7 +133,7 @@ export default {
130 .title { 133 .title {
131 position: absolute; 134 position: absolute;
132 left: 0; 135 left: 0;
133 top: 7px; 136 top: 10px;
134 bottom: 0; 137 bottom: 0;
135 right: 0; 138 right: 0;
136 margin: 0 auto; 139 margin: 0 auto;
......
...@@ -74,29 +74,22 @@ export const asyncRoutes = [ ...@@ -74,29 +74,22 @@ export const asyncRoutes = [
74 } 74 }
75 ] 75 ]
76 }, 76 },
77 // 上报报文查询 77 // 省厅汇交
78 { 78 {
79 path: '/sbbwcx', 79 path: '/sthj',
80 component: Layout, 80 component: Layout,
81 children: [ 81 children: [
82 { 82 {
83 path: 'index', 83 path: 'sbbwcx',
84 component: () => import('@/views/sbbwcx/index'), 84 component: () => import('@/views/sbbwcx/index'),
85 name: 'sbbwcx', 85 name: 'sbbwcx',
86 meta: { title: '上报报文查询', icon: 'zsgl' } 86 meta: { title: '上报报文', icon: 'zsgl' }
87 }
88 ]
89 }, 87 },
90 // 登簿日志
91 { 88 {
92 path: '/dbrzcx', 89 path: 'dbrzcx',
93 component: Layout,
94 children: [
95 {
96 path: 'index',
97 component: () => import('@/views/dbrzcx/index'), 90 component: () => import('@/views/dbrzcx/index'),
98 name: 'dbrzcx', 91 name: 'dbrzcx',
99 meta: { title: '登簿日志查询', icon: 'zhcx' } 92 meta: { title: '登簿日志', icon: 'zsgl' }
100 } 93 }
101 ] 94 ]
102 }, 95 },
...@@ -178,7 +171,7 @@ export const asyncRoutes = [ ...@@ -178,7 +171,7 @@ export const asyncRoutes = [
178 } 171 }
179 ] 172 ]
180 }, 173 },
181 // 接入业务信息 174 // 接入业务信息-不动产数据
182 { 175 {
183 path: '/busineInfo', 176 path: '/busineInfo',
184 component: Layout, 177 component: Layout,
...@@ -296,13 +289,13 @@ export const asyncRoutes = [ ...@@ -296,13 +289,13 @@ export const asyncRoutes = [
296 }, 289 },
297 { 290 {
298 path: 'validationRule', 291 path: 'validationRule',
299 component: () => import('@/views/system/validationRule'), 292 component: () => import('@/views/system/validationRule/index'),
300 name: 'validationRule', 293 name: 'validationRule',
301 meta: { title: '上报效验规则配置' } 294 meta: { title: '上报效验规则配置' }
302 }, 295 },
303 { 296 {
304 path: 'timedTask', 297 path: 'timedTask',
305 component: () => import('@/views/system/timedTask'), 298 component: () => import('@/views/system/timedTask/index'),
306 name: 'timedTask', 299 name: 'timedTask',
307 meta: { title: '定时任务' } 300 meta: { title: '定时任务' }
308 } 301 }
......
...@@ -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,64 @@ export default { ...@@ -74,75 +66,64 @@ 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 color:rgb(246, 246, 229);
90 }; 82 }
91 p:nth-child(2){ 83 p:nth-child(2) {
92 color: rgb(180, 178, 178); 84 color: rgb(223, 213, 81);
93 85 }
94 };
95 } 86 }
96 .text2{ 87 .text2 {
97 width: 33%; 88 width: 33%;
98 height: 100%; 89 height: 100%;
99 p{ 90 p {
100 height: 70px; 91 height: 70px;
101 line-height: 70px; 92 line-height: 70px;
102 font-size: 20px; 93 font-size: 20px;
103 text-align: center;; 94 text-align: center;
104 color: rgb(180, 178, 178); 95 color: rgb(180, 178, 178);
105 };
106 } 96 }
107 .text3{ 97 }
98 .text3 {
108 width: 33%; 99 width: 33%;
109 height: 100%; 100 height: 100%;
110 p{ 101 p {
111 height: 70px; 102 height: 70px;
112 line-height: 70px; 103 line-height: 70px;
113 font-size: 20px; 104 font-size: 20px;
114 text-align: center;; 105 text-align: center;
115 color: rgb(180, 178, 178); 106 color: rgb(180, 178, 178);
116 };
117 } 107 }
118 } 108 }
119 .card1{ 109 }
110 .card1 {
120 width: 100%; 111 width: 100%;
121 height: 200px; 112 height: 200px;
122 box-sizing: border-box;
123 background: url("~@/image/tablebk.png") no-repeat;
124 background-size: 100% 100%;
125
126 } 113 }
127 .card2{ 114 .card2 {
128 width: 100%; 115 width: 100%;
129 height: 200px; 116 height: 200px;
130 box-sizing: border-box;
131 background: url("~@/image/tablebk.png") no-repeat;
132 background-size: 100% 100%;
133 } 117 }
134 .card3{ 118 .card3 {
135 width: 100%; 119 width: 100%;
136 height: 500px; 120 height: 500px;
137 box-sizing: border-box; 121
138 background: url("~@/image/tablebk.png") no-repeat; 122 .mainCss {
139 background-size: 100% 100%; 123 width: 450px;
140 .mainCss{ 124 height: 420px;
141 width: 500px;
142 height:445px;
143 background-color: saddlebrown; 125 background-color: saddlebrown;
144 } 126 }
145 } 127 }
146 } 128 }
147
148 </style> 129 </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>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <!-- 列表区域 --> 36 <!-- 列表区域 -->
37 <div class="from-clues-content"> 37 <div class="from-clues-content">
38 <!-- table组件 --> 38 <!-- table组件 -->
39 <lb-table :page-size="pageData.size" :heightNum="210" :current-page.sync="pageData.current" 39 <lb-table :page-size="pageData.size" :heightNum="225" :current-page.sync="pageData.current"
40 :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" 40 :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
41 :column="tableData.columns" :data="tableData.data"> 41 :column="tableData.columns" :data="tableData.data">
42 </lb-table> 42 </lb-table>
......