Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
a45161ca by xiaomiao
Options

不动产监管大屏

1 parent dae4de37
Inline Side-by-side
Showing 24 changed files with 568 additions and 1974 deletions
1 <template>
2 <div>
3 <Echart
4 :options="options"
5 id="centreLeft1Chart"
6 height="480px"
7 width="100%"
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 colorList: {
20 linearYtoG: {
21 type: 'linear',
22 x: 0,
23 y: 0,
24 x2: 1,
25 y2: 1,
26 colorStops: [
27 {
28 offset: 0,
29 color: '#f5b44d'
30 },
31 {
32 offset: 1,
33 color: '#28f8de'
34 }
35 ]
36 },
37 linearGtoB: {
38 type: 'linear',
39 x: 0,
40 y: 0,
41 x2: 1,
42 y2: 0,
43 colorStops: [
44 {
45 offset: 0,
46 color: '#43dfa2'
47 },
48 {
49 offset: 1,
50 color: '#28f8de'
51 }
52 ]
53 },
54 linearBtoG: {
55 type: 'linear',
56 x: 0,
57 y: 0,
58 x2: 1,
59 y2: 0,
60 colorStops: [
61 {
62 offset: 0,
63 color: '#1c98e8'
64 },
65 {
66 offset: 1,
67 color: '#28f8de'
68 }
69 ]
70 },
71 areaBtoG: {
72 type: 'linear',
73 x: 0,
74 y: 0,
75 x2: 0,
76 y2: 1,
77 colorStops: [
78 {
79 offset: 0,
80 color: 'rgba(35,184,210,.2)'
81 },
82 {
83 offset: 1,
84 color: 'rgba(35,184,210,0)'
85 }
86 ]
87 }
88 }
89 }
90 },
91 components: {
92 Echart
93 },
94 props: {
95 cdata: {
96 type: Object,
97 default: () => ({})
98 }
99 },
100 watch: {
101 cdata: {
102 handler(newData) {
103 this.options = {
104 title: {
105 text: '',
106 textStyle: {
107 color: '#D3D6DD',
108 fontSize: 24,
109 fontWeight: 'normal'
110 },
111 subtext: newData.year + '/' + newData.weekCategory[6],
112 subtextStyle: {
113 color: '#fff',
114 fontSize: 16
115 },
116 top: 50,
117 left: 80
118 },
119 legend: {
120 top: 120,
121 left: 80,
122 orient: 'vertical',
123 itemGap: 15,
124 itemWidth: 12,
125 itemHeight: 12,
126 data: ['平均指标', '我的指标'],
127 textStyle: {
128 color: '#fff',
129 fontSize: 14
130 }
131 },
132 tooltip: {
133 trigger: 'item'
134 },
135 radar: {
136 center: ['68%', '27%'],
137 radius: '40%',
138 name: {
139 color: '#fff'
140 },
141 splitNumber: 8,
142 axisLine: {
143 lineStyle: {
144 color: this.colorList.linearYtoG,
145 opacity: 0.6
146 }
147 },
148 splitLine: {
149 lineStyle: {
150 color: this.colorList.linearYtoG,
151 opacity: 0.6
152 }
153 },
154 splitArea: {
155 areaStyle: {
156 color: '#fff',
157 opacity: 0.1,
158 shadowBlur: 25,
159 shadowColor: '#000',
160 shadowOffsetX: 0,
161 shadowOffsetY: 5
162 }
163 },
164 indicator: [
165 {
166 name: '服务态度',
167 max: newData.maxData
168 },
169 {
170 name: '产品质量',
171 max: 10
172 },
173 {
174 name: '任务效率',
175 max: 12
176 },
177 {
178 name: '售后保障',
179 max: 3.5
180 }
181 ]
182 },
183 grid: {
184 left: 90,
185 right: 80,
186 bottom: 40,
187 top: '60%'
188 },
189 xAxis: {
190 type: 'category',
191 position: 'bottom',
192 axisLine: true,
193 axisLabel: {
194 color: 'rgba(255,255,255,.8)',
195 fontSize: 12
196 },
197 data: newData.weekCategory
198 },
199 // 下方Y轴
200 yAxis: {
201 name: '工单',
202 nameLocation: 'end',
203 nameGap: 24,
204 nameTextStyle: {
205 color: 'rgba(255,255,255,.5)',
206 fontSize: 14
207 },
208 max: newData.maxData,
209 splitNumber: 4,
210
211 axisLine: {
212 lineStyle: {
213 opacity: 0
214 }
215 },
216 splitLine: {
217 show: true,
218 lineStyle: {
219 color: '#fff',
220 opacity: 0.1
221 }
222 },
223 axisLabel: {
224 color: 'rgba(255,255,255,.8)',
225 fontSize: 12
226 }
227 },
228 series: [
229 {
230 name: '',
231 type: 'radar',
232 symbolSize: 0,
233 data: [
234 {
235 value: newData.radarDataAvg[6],
236 name: '平均指标',
237 itemStyle: {
238 normal: {
239 color: '#f8d351'
240 }
241 },
242 lineStyle: {
243 normal: {
244 opacity: 0
245 }
246 },
247 areaStyle: {
248 normal: {
249 color: '#f8d351',
250 shadowBlur: 25,
251 shadowColor: 'rgba(248,211,81,.3)',
252 shadowOffsetX: 0,
253 shadowOffsetY: -10,
254 opacity: 1
255 }
256 }
257 },
258 {
259 value: newData.radarData[6],
260 name: '我的指标',
261 itemStyle: {
262 normal: {
263 color: '#43dfa2'
264 }
265 },
266 lineStyle: {
267 normal: {
268 opacity: 0
269 }
270 },
271 areaStyle: {
272 normal: {
273 color: this.colorList.linearGtoB,
274 shadowBlur: 15,
275 shadowColor: 'rgba(0,0,0,.2)',
276 shadowOffsetX: 0,
277 shadowOffsetY: 5,
278 opacity: 0.8
279 }
280 }
281 }
282 ]
283 },
284 {
285 name: '',
286 type: 'line',
287 smooth: true,
288 symbol: 'emptyCircle',
289 symbolSize: 8,
290 itemStyle: {
291 normal: {
292 color: '#fff'
293 }
294 },
295 lineStyle: {
296 normal: {
297 color: this.colorList.linearBtoG,
298 width: 3
299 }
300 },
301 areaStyle: {
302 normal: {
303 color: this.colorList.areaBtoG
304 }
305 },
306 data: newData.weekLineData,
307 lineSmooth: true,
308 markLine: {
309 silent: true,
310 data: [
311 {
312 type: 'average',
313 name: '平均值'
314 }
315 ],
316 precision: 0,
317 label: {
318 normal: {
319 formatter: '平均值: \n {c}'
320 }
321 },
322 lineStyle: {
323 normal: {
324 color: 'rgba(248,211,81,.7)'
325 }
326 }
327 },
328 tooltip: {
329 position: 'top',
330 formatter: '{c} m',
331 backgroundColor: 'rgba(28,152,232,.2)',
332 padding: 6
333 }
334 },
335 {
336 name: '占位背景',
337 type: 'bar',
338 itemStyle: {
339 normal: {
340 show: true,
341 color: '#000',
342 opacity: 0
343 }
344 },
345 silent: true,
346 barWidth: '50%',
347 data: newData.weekMaxData,
348 animation: false
349 }
350 ]
351 }
352 },
353 immediate: true,
354 deep: true
355 }
356 }
357 }
358 </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 drawTiming: null,
13 cdata: {
14 year: null,
15 weekCategory: [],
16 radarData: [],
17 radarDataAvg: [],
18 maxData: 12000,
19 weekMaxData: [],
20 weekLineData: []
21 }
22 }
23 },
24 components: {
25 Chart,
26 },
27 mounted () {
28 this.drawTimingFn();
29 },
30 beforeDestroy () {
31 clearInterval(this.drawTiming);
32 },
33 methods: {
34 drawTimingFn () {
35 this.setData();
36 this.drawTiming = setInterval(() => {
37 this.setData();
38 }, 6000);
39 },
40 setData () {
41 // 清空轮询数据
42 this.cdata.weekCategory = [];
43 this.cdata.weekMaxData = [];
44 this.cdata.weekLineData = [];
45 this.cdata.radarData = [];
46 this.cdata.radarDataAvg = [];
47
48 let dateBase = new Date();
49 this.cdata.year = dateBase.getFullYear();
50 // 周数据
51 for (let i = 0; i < 7; i++) {
52 // 日期
53 let date = new Date();
54 this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
55
56 // 折线图数据
57 this.cdata.weekMaxData.push(this.cdata.maxData);
58 let distance = Math.round(Math.random() * 11000 + 500);
59 this.cdata.weekLineData.push(distance);
60
61 // 雷达图数据
62 // 我的指标
63 let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
64 let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
65 let hour = +(distance / 1000 / averageSpeed).toFixed(1);
66 let radarDayData = [distance, averageSpeed, maxSpeed, hour];
67 this.cdata.radarData.unshift(radarDayData);
68
69 // 平均指标
70 let distanceAvg = Math.round(Math.random() * 8000 + 4000);
71 let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
72 let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
73 let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
74 let radarDayDataAvg = [
75 distanceAvg,
76 averageSpeedAvg,
77 maxSpeedAvg,
78 hourAvg
79 ];
80 this.cdata.radarDataAvg.unshift(radarDayDataAvg);
81 }
82
83 }
84 }
85 };
86 </script>
87
88 <style lang="scss" scoped>
89 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <!-- 通过率/达标率 -->
4 <Echart
5 :options="options"
6 :id="id"
7 height="100px"
8 width="100px"
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 id: {
26 type: String,
27 required: true,
28 default: "chartRate"
29 },
30 tips: {
31 type: Number,
32 required: true,
33 default: 50
34 },
35 colorObj: {
36 type: Object,
37 default: function () {
38 return {
39 textStyle: "#3fc0fb",
40 series: {
41 color: ["#00bcd44a", "transparent"],
42 dataColor: {
43 normal: "#03a9f4",
44 shadowColor: "#97e2f5"
45 }
46 }
47 };
48 }
49 }
50 },
51 watch: {
52 // tips 是会变更的数据，所以进行监听
53 tips: {
54 handler (newData) {
55 this.options = {
56 title:{
57 text: newData * 1 + "%",
58 x: "center",
59 y: "center",
60 textStyle: {
61 color: this.colorObj.textStyle,
62 fontSize: 16
63 }
64 },
65 series: [
66 {
67 type: "pie",
68 radius: ["75%", "80%"],
69 center: ["50%", "50%"],
70 hoverAnimation: false,
71 color: this.colorObj.series.color,
72 label: {
73 normal: {
74 show: false
75 }
76 },
77 data: [
78 {
79 value: newData,
80 itemStyle: {
81 normal: {
82 color: this.colorObj.series.dataColor.normal,
83 shadowBlur: 10,
84 shadowColor: this.colorObj.series.dataColor.shadowColor
85 }
86 }
87 },
88 {
89 value: 100 - newData
90 }
91 ]
92 }
93 ]
94 }
95 },
96 immediate: true,
97 deep: true
98 }
99 }
100 };
101 </script>
102
103 <style lang="scss" scoped>
104 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <Echart
4 :options="options"
5 id="centreLeft1Chart"
6 height="220px"
7 width="260px"
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 color: [
34 "#37a2da",
35 "#32c5e9",
36 "#9fe6b8",
37 "#ffdb5c",
38 "#ff9f7f",
39 "#fb7293",
40 "#e7bcf3",
41 "#8378ea"
42 ],
43 tooltip: {
44 trigger: "item",
45 formatter: "{a} <br/>{b} : {c} ({d}%)"
46 },
47 toolbox: {
48 show: true
49 },
50 calculable: true,
51 legend: {
52 orient: "horizontal",
53 icon: "circle",
54 bottom: 0,
55 x: "center",
56 data: newData.xData,
57 textStyle: {
58 color: "#fff"
59 }
60 },
61 series: [
62 {
63 name: "通过率统计",
64 type: "pie",
65 radius: [10, 50],
66 roseType: "area",
67 center: ["50%", "40%"],
68 data: newData.seriesData
69 }
70 ]
71 }
72 },
73 immediate: true,
74 deep: true
75 }
76 }
77 };
78 </script>
79
80 <style lang="scss" scoped>
81 </style>
...\ No newline at end of file ...\ No newline at end of file
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 xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
14 seriesData: [
15 { value: 10, name: "data1" },
16 { value: 5, name: "data2" },
17 { value: 15, name: "data3" },
18 { value: 25, name: "data4" },
19 { value: 20, name: "data5" },
20 { value: 35, name: "data6" }
21 ]
22 }
23 }
24 },
25 components: {
26 Chart,
27 },
28 mounted () {
29 },
30 methods: {
31 }
32 }
33 </script>
34
35 <style lang="scss" scoped>
36 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <Echart
4 :options="options"
5 id="centreRight2Chart1"
6 height="200px"
7 width="260px"
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 // 固定样式数据
33 let lineStyle = {
34 normal: {
35 width: 1,
36 opacity: 0.5
37 }
38 };
39
40 this.options = {
41 radar: {
42 indicator: newData.indicatorData,
43 shape: "circle",
44 splitNumber: 5,
45 radius: ["0%", "65%"],
46 name: {
47 textStyle: {
48 color: "rgb(238, 197, 102)"
49 }
50 },
51 splitLine: {
52 lineStyle: {
53 color: [
54 "rgba(238, 197, 102, 0.1)",
55 "rgba(238, 197, 102, 0.2)",
56 "rgba(238, 197, 102, 0.4)",
57 "rgba(238, 197, 102, 0.6)",
58 "rgba(238, 197, 102, 0.8)",
59 "rgba(238, 197, 102, 1)"
60 ].reverse()
61 }
62 },
63 splitArea: {
64 show: false
65 },
66 axisLine: {
67 lineStyle: {
68 color: "rgba(238, 197, 102, 0.5)"
69 }
70 }
71 },
72 series: [
73 {
74 name: "北京",
75 type: "radar",
76 lineStyle: lineStyle,
77 data: newData.dataBJ,
78 symbol: "none",
79 itemStyle: {
80 normal: {
81 color: "#F9713C"
82 }
83 },
84 areaStyle: {
85 normal: {
86 opacity: 0.1
87 }
88 }
89 },
90 {
91 name: "上海",
92 type: "radar",
93 lineStyle: lineStyle,
94 data: newData.dataSH,
95 symbol: "none",
96 itemStyle: {
97 normal: {
98 color: "#B3E4A1"
99 }
100 },
101 areaStyle: {
102 normal: {
103 opacity: 0.05
104 }
105 }
106 },
107 {
108 name: "广州",
109 type: "radar",
110 lineStyle: lineStyle,
111 data: newData.dataGZ,
112 symbol: "none",
113 itemStyle: {
114 normal: {
115 color: "rgb(238, 197, 102)"
116 }
117 },
118 areaStyle: {
119 normal: {
120 opacity: 0.05
121 }
122 }
123 } //end
124 ]
125 }
126 },
127 immediate: true,
128 deep: true
129 }
130 }
131 };
132 </script>
...\ No newline at end of file ...\ No newline at end of file
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 indicatorData: [
14 { name: "data1", max: 300 },
15 { name: "data2", max: 250 },
16 { name: "data3", max: 300 },
17 { name: "data4", max: 5},
18 { name: "data5", max: 200 },
19 { name: "data6", max: 100 }
20 ],
21 dataBJ: [
22 [94, 69, 114, 2.08, 73, 39, 22],
23 [99, 73, 110, 2.43, 76, 48, 23],
24 [31, 12, 30, 0.5, 32, 16, 24],
25 [42, 27, 43, 1, 53, 22, 25],
26 [154, 117, 157, 3.05, 92, 58, 26],
27 [234, 185, 230, 4.09, 123, 69, 27],
28 [160, 120, 186, 2.77, 91, 50, 28]
29 ],
30 dataGZ: [
31 [84, 94, 140, 2.238, 68, 18, 22],
32 [93, 77, 104, 1.165, 53, 7, 23],
33 [99, 130, 227, 3.97, 55, 15, 24],
34 [146, 84, 139, 1.094, 40, 17, 25],
35 [113, 108, 137, 1.481, 48, 15, 26],
36 [81, 48, 62, 1.619, 26, 3, 27],
37 [56, 48, 68, 1.336, 37, 9, 28]
38 ],
39 dataSH: [
40 [91, 45, 125, 0.82, 34, 23, 1],
41 [65, 27, 78, 0.86, 45, 29, 2],
42 [83, 60, 84, 1.09, 73, 27, 3],
43 [109, 81, 121, 1.28, 68, 51, 4],
44 [106, 77, 114, 1.07, 55, 51, 5],
45 [109, 81, 121, 1.28, 68, 51, 6],
46 [106, 77, 114, 1.07, 55, 51, 7]
47 ]
48 }
49 }
50 },
51 components: {
52 Chart,
53 }
54 }
55 </script>
...\ No newline at end of file ...\ No newline at end of file
...@@ -31,115 +31,94 @@ export default { ...@@ -31,115 +31,94 @@ export default {
31 cdata: { 31 cdata: {
32 handler (newData) { 32 handler (newData) {
33 this.options = { 33 this.options = {
34 tooltip: {
35 trigger: "axis",
36 backgroundColor: "rgba(255,255,255,0.1)",
37 axisPointer: {
38 type: "shadow",
39 label: {
40 show: true,
41 backgroundColor: "#7B7DDC"
42 }
43 }
44 },
45 legend: { 34 legend: {
46 data: ["已贯通", "计划贯通", "贯通率"], 35 data: ['资产原值', '累计折旧'],
47 textStyle: { 36 textStyle: {
48 color: "#B4B4B4" 37 color: "#B4B4B4"
49 }, 38 },
50 top: "0%" 39 top: "0%"
51 }, 40 },
52 grid: { 41 grid: {
53 x: "8%", 42 left: '3%',
54 width: "88%", 43 right: '4%',
55 y: "4%" 44 bottom: '3%',
45 containLabel: true
56 }, 46 },
57 xAxis: { 47 xAxis: {
58 data: newData.category, 48 type: 'value',
59 axisLine: { 49 splitLine: {show: false},
60 lineStyle: { 50 axisTick: { show: false },
61 color: "#B4B4B4" 51 axisLine: {
62 } 52 show: true,
53 lineStyle:{
54 color:'#01F3F5'
63 }, 55 },
64 axisTick: { 56 },
65 show: false 57 axisLabel: {
66 } 58 show:true,
59 textStyle:{
60 color:'#01F3F5',
61 fontSize:12,
62 },
63 rotate:30
64 }
65
67 }, 66 },
68 yAxis: [ 67 yAxis: {
69 { 68 type: 'category',
70 splitLine: { show: false }, 69 data: ['房屋','建筑物','机械设备','运输工具'],
71 axisLine: { 70 splitLine: {show: false},
72 lineStyle: { 71 axisTick: { show: false },
73 color: "#B4B4B4" 72 axisLine: {
74 } 73 show: true,
75 }, 74 lineStyle:{
75 color:'#01F3F5'
76 }
77 },
78 },
76 79
77 axisLabel: { 80 series: [
78 formatter: "{value} " 81 {
79 } 82 name: '资产原值',
80 }, 83 type: 'bar',
81 { 84 stack: '总量',
82 splitLine: { show: false }, 85 barWidth: 30,
83 axisLine: { 86 itemStyle:{
84 lineStyle: { 87 normal: {
85 color: "#B4B4B4" 88 color: '#6601FF',
86 } 89 }
87 }, 90 },
88 axisLabel: { 91 label: {
89 formatter: "{value} "
90 }
91 }
92 ],
93 series: [
94 {
95 name: "贯通率",
96 type: "line",
97 smooth: true,
98 showAllSymbol: true,
99 symbol: "emptyCircle",
100 symbolSize: 8,
101 yAxisIndex: 1,
102 itemStyle: {
103 normal: { 92 normal: {
104 color: "#F02FC2" 93 show: true,
94 position: 'insideRight'
105 } 95 }
106 },
107 data: newData.rateData
108 }, 96 },
109 { 97 z: 10,
110 name: "已贯通", 98 data: [320, 302, 301, 543]
111 type: "bar", 99 },
112 barWidth: 10, 100 {
113 itemStyle: { 101 name: '累计折旧',
102 type: 'bar',
103 stack: '总量',
104 itemStyle:{
114 normal: { 105 normal: {
115 barBorderRadius: 5, 106 color: '#00F0FF'
116 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
117 { offset: 0, color: "#956FD4" },
118 { offset: 1, color: "#3EACE5" }
119 ])
120 } 107 }
121 },
122 data: newData.barData
123 }, 108 },
124 { 109 label: {
125 name: "计划贯通",
126 type: "bar",
127 barGap: "-100%",
128 barWidth: 10,
129 itemStyle: {
130 normal: { 110 normal: {
131 barBorderRadius: 5, 111 show: true,
132 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ 112 position: 'insideRight',
133 { offset: 0, color: "rgba(156,107,211,0.8)" }, 113 textStyle:{
134 { offset: 0.2, color: "rgba(156,107,211,0.5)" }, 114 color:'#6601FF'
135 { offset: 1, color: "rgba(156,107,211,0.2)" } 115 }
136 ])
137 } 116 }
138 }, 117 },
139 z: -12, 118 z: 5,
140 data: newData.lineData 119 data: [90, 230, 210, 432]
141 } 120 },
142 ] 121 ]
143 } 122 }
144 }, 123 },
145 immediate: true, 124 immediate: true,
...@@ -147,4 +126,4 @@ export default { ...@@ -147,4 +126,4 @@ export default {
147 }, 126 },
148 }, 127 },
149 } 128 }
150 </script>
...\ No newline at end of file ...\ No newline at end of file
129 </script>
......
...@@ -11,13 +11,13 @@ export default { ...@@ -11,13 +11,13 @@ export default {
11 return { 11 return {
12 cdata: { 12 cdata: {
13 category: [ 13 category: [
14 "市区", 14 "汉台区",
15 "万州", 15 "南郑区",
16 "江北", 16 "城固县",
17 "南岸", 17 "洋县",
18 "北碚", 18 "西乡县",
19 "綦南", 19 "勉县",
20 "长寿", 20 "宁强县",
21 "永川", 21 "永川",
22 "璧山", 22 "璧山",
23 "江津", 23 "江津",
...@@ -123,19 +123,12 @@ export default { ...@@ -123,19 +123,12 @@ export default {
123 Chart, 123 Chart,
124 }, 124 },
125 mounted () { 125 mounted () {
126 this.setData();
127 }, 126 },
128 methods: { 127 methods: {
129 // 根据自己的业务情况修改 128
130 setData () {
131 for (let i = 0; i < this.cdata.barData.length -1; i++) {
132 let rate = this.cdata.barData[i] / this.cdata.lineData[i];
133 this.cdata.rateData.push(rate.toFixed(2));
134 }
135 },
136 } 129 }
137 }; 130 };
138 </script> 131 </script>
139 132
140 <style lang="scss" scoped> 133 <style lang="scss" scoped>
141 </style>
...\ No newline at end of file ...\ No newline at end of file
134 </style>
......
1 <template>
2 <div id="bottomLeft">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="chart-bar" class="text-icon"></icon>
7 </span>
8 <div class="d-flex">
9 <span class="fs-xl text mx-2">数据统计图</span>
10 </div>
11 </div>
12 <div>
13 <BottomLeftChart />
14 </div>
15 </div>
16 </div>
17 </template>
18
19 <script>
20 import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
21 export default {
22 components: {
23 BottomLeftChart
24 }
25 }
26 </script>
27
28 <style lang="scss" scoped>
29 $box-height: 520px;
30 $box-width: 100%;
31 #bottomLeft {
32 padding: 20px 16px;
33 height: $box-height;
34 width: $box-width;
35 border-radius: 5px;
36 .bg-color-black {
37 height: $box-height - 35px;
38 border-radius: 10px;
39 }
40 .text {
41 color: #c3cbde;
42 }
43 .chart-box {
44 margin-top: 16px;
45 width: 170px;
46 height: 170px;
47 .active-ring-name {
48 padding-top: 10px;
49 }
50 }
51 }
52 </style>
1 <template>
2 <div id="bottomRight">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="chart-area" class="text-icon"></icon>
7 </span>
8 <div class="d-flex">
9 <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
10 <div class="decoration2">
11 <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
12 </div>
13 </div>
14 </div>
15 <div>
16 <BottomRightChart />
17 </div>
18 </div>
19 </div>
20 </template>
21
22 <script>
23 import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
24 export default {
25 components: {
26 BottomRightChart
27 }
28 };
29 </script>
30
31 <style lang="scss" class>
32 $box-height: 520px;
33 $box-width: 100%;
34 #bottomRight {
35 padding: 14px 16px;
36 height: $box-height;
37 width: $box-width;
38 border-radius: 5px;
39 .bg-color-black {
40 height: $box-height - 30px;
41 border-radius: 10px;
42 }
43 .text {
44 color: #c3cbde;
45 }
46 //下滑线动态
47 .decoration2 {
48 position: absolute;
49 right: 0.125rem;
50 }
51 .chart-box {
52 margin-top: 16px;
53 width: 170px;
54 height: 170px;
55 .active-ring-name {
56 padding-top: 10px;
57 }
58 }
59 }
60 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div id="center">
3 <div class="up">
4 <div
5 class="bg-color-black item"
6 v-for="item in titleItem"
7 :key="item.title"
8 >
9 <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
10 <div>
11 <dv-digital-flop
12 class="dv-dig-flop ml-1 mt-2 pl-3"
13 :config="item.number"
14 />
15 </div>
16 </div>
17 </div>
18 <div class="down">
19 <div class="ranking bg-color-black">
20 <span>
21 <icon name="chart-pie" class="text-icon"></icon>
22 </span>
23 <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
24 <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
25 </div>
26 <div class="percent">
27 <div class="item bg-color-black">
28 <span>今日任务通过率</span>
29 <CenterChart
30 :id="rate[0].id"
31 :tips="rate[0].tips"
32 :colorObj="rate[0].colorData"
33 />
34 </div>
35 <div class="item bg-color-black">
36 <span>今日任务达标率</span>
37 <CenterChart
38 :id="rate[1].id"
39 :tips="rate[1].tips"
40 :colorObj="rate[1].colorData"
41 />
42 </div>
43 <div class="water">
44 <dv-water-level-pond class="dv-wa-le-po" :config="water" />
45 </div>
46 </div>
47 </div>
48 </div>
49 </template>
50
51 <script>
52 import CenterChart from '@/components/echart/center/centerChartRate'
53
54 export default {
55 data() {
56 return {
57 titleItem: [
58 {
59 title: '今年累计任务建次数',
60 number: {
61 number: [120],
62 toFixed: 1,
63 textAlign: 'left',
64 content: '{nt}',
65 style: {
66 fontSize: 26
67 }
68 }
69 },
70 {
71 title: '本月累计任务次数',
72 number: {
73 number: [18],
74 toFixed: 1,
75 textAlign: 'left',
76 content: '{nt}',
77 style: {
78 fontSize: 26
79 }
80 }
81 },
82 {
83 title: '今日累计任务次数',
84 number: {
85 number: [2],
86 toFixed: 1,
87 textAlign: 'left',
88 content: '{nt}',
89 style: {
90 fontSize: 26
91 }
92 }
93 },
94 {
95 title: '今年失败任务次数',
96 number: {
97 number: [14],
98 toFixed: 1,
99 textAlign: 'left',
100 content: '{nt}',
101 style: {
102 fontSize: 26
103 }
104 }
105 },
106 {
107 title: '今年成功任务次数',
108 number: {
109 number: [106],
110 toFixed: 1,
111 textAlign: 'left',
112 content: '{nt}',
113 style: {
114 fontSize: 26
115 }
116 }
117 },
118 {
119 title: '今年达标任务个数',
120 number: {
121 number: [100],
122 toFixed: 1,
123 textAlign: 'left',
124 content: '{nt}',
125 style: {
126 fontSize: 26
127 }
128 }
129 }
130 ],
131 ranking: {
132 data: [
133 {
134 name: '周口',
135 value: 55
136 },
137 {
138 name: '南阳',
139 value: 120
140 },
141 {
142 name: '西峡',
143 value: 78
144 },
145 {
146 name: '驻马店',
147 value: 66
148 },
149 {
150 name: '新乡',
151 value: 80
152 },
153 {
154 name: '新乡2',
155 value: 80
156 },
157 {
158 name: '新乡3',
159 value: 80
160 },
161 {
162 name: '新乡4',
163 value: 80
164 },
165 {
166 name: '新乡5',
167 value: 80
168 },
169 {
170 name: '新乡6',
171 value: 80
172 }
173 ],
174 carousel: 'single',
175 unit: '人'
176 },
177 water: {
178 data: [24, 45],
179 shape: 'roundRect',
180 formatter: '{value}%',
181 waveNum: 3
182 },
183 // 通过率和达标率的组件复用数据
184 rate: [
185 {
186 id: 'centerRate1',
187 tips: 60,
188 colorData: {
189 textStyle: '#3fc0fb',
190 series: {
191 color: ['#00bcd44a', 'transparent'],
192 dataColor: {
193 normal: '#03a9f4',
194 shadowColor: '#97e2f5'
195 }
196 }
197 }
198 },
199 {
200 id: 'centerRate2',
201 tips: 40,
202 colorData: {
203 textStyle: '#67e0e3',
204 series: {
205 color: ['#faf3a378', 'transparent'],
206 dataColor: {
207 normal: '#ff9800',
208 shadowColor: '#fcebad'
209 }
210 }
211 }
212 }
213 ]
214 }
215 },
216 components: {
217 CenterChart
218 }
219 }
220 </script>
221
222 <style lang="scss" scoped>
223 #center {
224 display: flex;
225 flex-direction: column;
226 .up {
227 width: 100%;
228 display: flex;
229 flex-wrap: wrap;
230 justify-content: space-around;
231 .item {
232 border-radius: 6px;
233 padding-top: 8px;
234 margin-top: 8px;
235 width: 32%;
236 height: 70px;
237 .dv-dig-flop {
238 width: 150px;
239 height: 30px;
240 }
241 }
242 }
243 .down {
244 padding: 6px 4px;
245 padding-bottom: 0;
246 width: 100%;
247 display: flex;
248 height: 255px;
249 justify-content: space-between;
250 .bg-color-black {
251 border-radius: 5px;
252 }
253 .ranking {
254 padding: 10px;
255 width: 59%;
256 .dv-scr-rank-board {
257 height: 225px;
258 }
259 }
260 .percent {
261 width: 40%;
262 display: flex;
263 flex-wrap: wrap;
264 .item {
265 width: 50%;
266 height: 120px;
267 span {
268 margin-top: 8px;
269 font-size: 14px;
270 display: flex;
271 justify-content: center;
272 }
273 }
274 .water {
275 width: 100%;
276 .dv-wa-le-po {
277 height: 120px;
278 }
279 }
280 }
281 }
282 }
283 </style>
1 <template>
2 <div id="centerLeft1">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="chart-bar" class="text-icon"></icon>
7 </span>
8 <div class="d-flex">
9 <span class="fs-xl text mx-2">任务通过率</span>
10 <dv-decoration-3 class="dv-dec-3" />
11 </div>
12 </div>
13 <div class="d-flex jc-center">
14 <CenterLeft1Chart />
15 </div>
16 <!-- 4个主要的数据 -->
17 <div class="bottom-data">
18 <div
19 class="item-box mt-2"
20 v-for="(item, index) in numberData"
21 :key="index"
22 >
23 <div class="d-flex">
24 <span class="coin">￥</span>
25 <dv-digital-flop class="dv-digital-flop" :config="item.number" />
26 </div>
27 <p class="text" style="text-align: center;">
28 {{ item.text }}
29 <span class="colorYellow">(件)</span>
30 </p>
31 </div>
32 </div>
33 </div>
34 </div>
35 </template>
36
37 <script>
38 import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
39 export default {
40 data() {
41 return {
42 numberData: [
43 {
44 number: {
45 number: [15],
46 toFixed: 1,
47 textAlign: 'left',
48 content: '{nt}',
49 style: {
50 fontSize: 24
51 }
52 },
53 text: '今日构建总量'
54 },
55 {
56 number: {
57 number: [1144],
58 toFixed: 1,
59 textAlign: 'left',
60 content: '{nt}',
61 style: {
62 fontSize: 24
63 }
64 },
65 text: '总共完成数量'
66 },
67 {
68 number: {
69 number: [361],
70 toFixed: 1,
71 textAlign: 'left',
72 content: '{nt}',
73 style: {
74 fontSize: 24
75 }
76 },
77 text: '正在编译数量'
78 },
79 {
80 number: {
81 number: [157],
82 toFixed: 1,
83 textAlign: 'left',
84 content: '{nt}',
85 style: {
86 fontSize: 24
87 }
88 },
89 text: '未通过数量'
90 }
91 ]
92 }
93 },
94 components: {
95 CenterLeft1Chart
96 },
97 mounted() {
98 this.changeTiming()
99 },
100 methods: {
101 changeTiming() {
102 setInterval(() => {
103 this.changeNumber()
104 }, 3000)
105 },
106 changeNumber() {
107 this.numberData.forEach((item, index) => {
108 item.number.number[0] += ++index
109 item.number = { ...item.number }
110 })
111 }
112 }
113 }
114 </script>
115
116 <style lang="scss" scoped>
117 $box-width: 300px;
118 $box-height: 410px;
119
120 #centerLeft1 {
121 padding: 16px;
122 height: $box-height;
123 width: $box-width;
124 border-radius: 10px;
125 .bg-color-black {
126 height: $box-height - 30px;
127 border-radius: 10px;
128 }
129 .text {
130 color: #c3cbde;
131 }
132 .dv-dec-3 {
133 position: relative;
134 width: 100px;
135 height: 20px;
136 top: -3px;
137 }
138
139 .bottom-data {
140 .item-box {
141 & > div {
142 padding-right: 5px;
143 }
144 font-size: 14px;
145 float: right;
146 position: relative;
147 width: 50%;
148 color: #d3d6dd;
149 .dv-digital-flop {
150 width: 120px;
151 height: 30px;
152 }
153 // 金币
154 .coin {
155 position: relative;
156 top: 6px;
157 font-size: 20px;
158 color: #ffc107;
159 }
160 .colorYellow {
161 color: yellowgreen;
162 }
163 p {
164 text-align: center;
165 }
166 }
167 }
168 }
169 </style>
1 <template>
2 <div id="centerLeft1">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="chart-pie" class="text-icon"></icon>
7 </span>
8 <div class="d-flex">
9 <span class="fs-xl text mx-2">地图数据</span>
10 <dv-decoration-1 class="dv-dec-1" />
11 </div>
12 </div>
13 <div class="d-flex jc-center">
14 <CenterLeft2Chart />
15 </div>
16 </div>
17 </div>
18 </template>
19
20 <script>
21 import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
22 export default {
23 components: {
24 CenterLeft2Chart
25 },
26 };
27 </script>
28
29 <style lang="scss" scoped>
30 #centerLeft1 {
31 $box-width: 300px;
32 $box-height: 410px;
33 padding: 16px;
34 height: $box-height;
35 min-width: $box-width;
36 border-radius: 5px;
37 .bg-color-black {
38 height: $box-height - 30px;
39 border-radius: 10px;
40 }
41 .text {
42 color: #c3cbde;
43 }
44 .dv-dec-1 {
45 position: relative;
46 width: 100px;
47 height: 20px;
48 top: -3px;
49 }
50 .chart-box {
51 margin-top: 16px;
52 width: 170px;
53 height: 170px;
54 .active-ring-name {
55 padding-top: 10px;
56 }
57 }
58 }
59 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div id="centerRight1">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="chart-line" class="text-icon"></icon>
7 </span>
8 <div class="d-flex">
9 <span class="fs-xl text mx-2">任务完成排行榜</span>
10 </div>
11 </div>
12 <div class="d-flex jc-center body-box">
13 <dv-scroll-board class="dv-scr-board" :config="config" />
14 </div>
15 </div>
16 </div>
17 </template>
18
19 <script>
20 export default {
21 data() {
22 return {
23 config: {
24 header: ['组件', '分支', '覆盖率'],
25 data: [
26 ['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
27 ['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
28 ['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
29 ['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
30 ['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
31 ['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
32 ['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
33 ['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
34 ['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
35 ['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
36 ],
37 rowNum: 7, //表格行数
38 headerHeight: 35,
39 headerBGC: '#0f1325', //表头
40 oddRowBGC: '#0f1325', //奇数行
41 evenRowBGC: '#171c33', //偶数行
42 index: true,
43 columnWidth: [50],
44 align: ['center']
45 }
46 }
47 }
48 }
49 </script>
50
51 <style lang="scss" scoped>
52 $box-height: 410px;
53 $box-width: 300px;
54 #centerRight1 {
55 padding: 16px;
56 padding-top: 20px;
57 height: $box-height;
58 width: $box-width;
59 border-radius: 5px;
60 .bg-color-black {
61 height: $box-height - 30px;
62 border-radius: 10px;
63 }
64 .text {
65 color: #c3cbde;
66 }
67 .body-box {
68 border-radius: 10px;
69 overflow: hidden;
70 .dv-scr-board {
71 width: 270px;
72 height: 340px;
73 }
74 }
75 }
76 </style>
1 <template>
2 <div id="centerRight2">
3 <div class="bg-color-black">
4 <div class="d-flex pt-2 pl-2">
5 <span>
6 <icon name="align-left" class="text-icon"></icon>
7 </span>
8 <span class="fs-xl text mx-2">产品销售渠道分析</span>
9 </div>
10 <div class="d-flex ai-center flex-column body-box">
11 <dv-capsule-chart class="dv-cap-chart" :config="config" />
12 <centerRight2Chart1 />
13 </div>
14 </div>
15 </div>
16 </template>
17
18 <script>
19 import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
20
21 export default {
22 data() {
23 return {
24 config: {
25 data: [
26 {
27 name: '南阳',
28 value: 167
29 },
30 {
31 name: '周口',
32 value: 67
33 },
34 {
35 name: '漯河',
36 value: 123
37 },
38 {
39 name: '郑州',
40 value: 55
41 },
42 {
43 name: '西峡',
44 value: 98
45 }
46 ]
47 }
48 }
49 },
50 components: { centerRight2Chart1 }
51 }
52 </script>
53
54 <style lang="scss" scoped>
55 #centerRight2 {
56 $box-height: 410px;
57 $box-width: 340px;
58 padding: 5px;
59 height: $box-height;
60 width: $box-width;
61 border-radius: 5px;
62 .bg-color-black {
63 padding: 5px;
64 height: $box-height;
65 width: $box-width;
66 border-radius: 10px;
67 }
68 .text {
69 color: #c3cbde;
70 }
71 .body-box {
72 border-radius: 10px;
73 overflow: hidden;
74 .dv-cap-chart {
75 width: 100%;
76 height: 160px;
77 }
78 }
79 }
80 </style>
1 <template>
2 <div class="centercard">
3 <div class="card1">
4 <CenterLeft2Chart class="map" />
5 </div>
6 <div class="card2"></div>
7 </div>
8 </template>
9
10 <script>
11 import CenterLeft2Chart from "@/components/echart/map";
12 export default {
13 data() {
14 return {};
15 },
16 components: { CenterLeft2Chart },
17 mounted() {},
18 beforeDestroy() {},
19 methods: {},
20 };
21 </script>
22
23 <style lang="scss" scoped>
24 .centercard{
25 width: 50%;
26 height: 100%;
27 .card1{
28 width: 100%;
29 height: 600px;
30 box-sizing: border-box;
31 background: url("~@/image/tablebk.png") no-repeat;
32 background-size: 100% 100%;
33 }
34 .card2{
35 width: 100%;
36 height: 300px;
37 box-sizing: border-box;
38 background: url("~@/image/tablebk.png") no-repeat;
39 background-size: 100% 100%;
40 }
41 }
42 </style>
1 .bigScreen { 1 .bigScreen {
2 width: 100vw; 2 width: 100vw;
3 height: 100vh; 3 height: 100vh;
4 background-color: #020308; 4 background-color: #031754;
5 overflow: hidden; 5 overflow: hidden;
6 } 6 }
7 #index { 7 #index {
8 color: #d3d6dd; 8 color: #d3d6dd;
9 width: 1920px; 9 width:2150px;
10 height: 1080px; 10 height: 1080px;
11 position: absolute; 11 position: absolute;
12 top: 50%; 12 top: 50%;
13 left: 50%; 13 left: 50%;
14 transform: translate(-50%, -50%);
15 transform-origin: left top; 14 transform-origin: left top;
16 overflow: hidden; 15 overflow: hidden;
17 16
18 .bg { 17 .bg {
19 width: 100%; 18 width: 100%;
20 height: 100%; 19 height: 100%;
21 padding: 16px 16px 0 16px;
22 background-image: url("../../image/pageBg.png");
23 background-size: cover; 20 background-size: cover;
24 background-position: center center; 21 background-position: center center;
25 } 22 }
26 23
27 .host-body { 24 .host-body{
28 25 .header{
29 .dv-dec-10, 26 width: 100%;
30 .dv-dec-10-s { 27 height: 100px;
31 width: 33.3%; 28 .head{
32 height: 5px; 29 margin-top: 50px;
33 }
34
35 .dv-dec-10-s {
36 transform: rotateY(180deg);
37 }
38
39 .dv-dec-8 {
40 width: 200px;
41 height: 50px;
42 }
43
44 .title {
45 position: relative;
46 width: 500px;
47 text-align: center;
48 background-size: cover;
49 background-repeat: no-repeat;
50
51 .title-text {
52 font-size: 24px;
53 position: absolute;
54 bottom: 0;
55 left: 50%;
56 transform: translate(-50%);
57 } 30 }
58 31
59 .dv-dec-6 { 32 .dv-dec-10,
60 position: absolute; 33 .dv-dec-10-s {
61 bottom: -30px; 34 width: 50.3%;
62 left: 50%; 35 height: 10px;
63 width: 250px;
64 height: 8px;
65 transform: translate(-50%);
66 } 36 }
67 }
68
69 // 第二行
70 .aside-width {
71 width: 40%;
72 }
73 37
74 .react-r-s, 38 .dv-dec-10-s {
75 .react-l-s { 39 transform: rotateY(180deg);
76 background-color: #0f1325;
77 }
78
79 // 平行四边形
80 .react-right {
81 &.react-l-s {
82 text-align: right;
83 width: 500px;
84 } 40 }
85 41
86 font-size: 18px; 42 .dv-dec-8 {
87 width: 300px; 43 width: 200px;
88 line-height: 50px;
89 text-align: center;
90 transform: skewX(-45deg);
91
92 .react-after {
93 position: absolute;
94 right: -25px;
95 top: 0;
96 height: 50px; 44 height: 50px;
97 width: 50px;
98 background-color: #0f1325;
99 transform: skewX(45deg);
100 }
101
102 .text {
103 display: inline-block;
104 transform: skewX(45deg);
105 } 45 }
106 }
107 46
108 .react-left { 47 .title {
109 &.react-l-s { 48 position: relative;
110 width: 500px; 49 width: 500px;
111 text-align: left; 50 text-align: center;
112 } 51 background-size: cover;
113 52 background-repeat: no-repeat;
114 font-size: 18px; 53 .dv-dec-5{
115 width: 300px; 54 position: absolute;
116 height: 50px; 55 width: 500px;
117 line-height: 50px; 56 height: 40px;
118 text-align: center; 57 left: 0;
119 transform: skewX(45deg); 58 top: 38.5px;
120 background-color: #0f1325; 59 }
121 60 .title-text {
122 .react-left { 61 font-size: 37px;
123 position: absolute; 62 position: absolute;
124 left: -25px; 63 font-weight: 600;
125 top: 0; 64 width: 500px;
126 height: 50px; 65 bottom: 20px;
127 width: 50px; 66 left: 50%;
128 background-color: #0f1325; 67 transform: translate(-50%);
129 transform: skewX(-45deg); 68 }
130 } 69
131 70 .dv-dec-6 {
132 .text { 71 position: absolute;
133 display: inline-block; 72 bottom: -30px;
134 transform: skewX(-45deg); 73 left: 50%;
74 width: 250px;
75 height: 8px;
76 transform: translate(-50%);
77 }
135 } 78 }
136 } 79 }
137 80 .content{
138 .body-box { 81 width: 98%;
139 margin-top: 16px; 82 height: 900px;
83 margin: auto;
140 display: flex; 84 display: flex;
141 flex-direction: column;
142 85
143 //下方区域的布局 86 .centercard{
144 .content-box { 87 width: 50%;
145 display: grid; 88 height: 100%;
146 grid-template-columns: 2fr 3fr 5fr 3fr 2fr; 89 .card1{
90 width: 100%;
91 height: 600px;
92 box-sizing: border-box;
93 background: url("~@/image/tablebk.png") no-repeat;
94 background-size: 100% 100%;
95 }
96 .card2{
97 width: 100%;
98 height: 300px;
99 box-sizing: border-box;
100 background: url("~@/image/tablebk.png") no-repeat;
101 background-size: 100% 100%;
102 }
147 } 103 }
148 104 .rightcard{
149 // 底部数据 105 width: 25%;
150 .bottom-box { 106 height: 100%;
151 margin-top: 10px; 107 .card1{
152 display: grid; 108 width: 100%;
153 grid-template-columns: repeat(2, 50%); 109 height: 300px;
110 box-sizing: border-box;
111 background: url("~@/image/tablebk.png") no-repeat;
112 background-size: 100% 100%;
113 }
114 .card2{
115 width: 100%;
116 height: 300px;
117 box-sizing: border-box;
118 background: url("~@/image/tablebk.png") no-repeat;
119 background-size: 100% 100%;
120 }
121 .card3{
122 width: 100%;
123 height: 300px;
124 box-sizing: border-box;
125 background: url("~@/image/tablebk.png") no-repeat;
126 background-size: 100% 100%;
127 }
154 } 128 }
155 } 129 }
156 } 130 }
157 }
...\ No newline at end of file ...\ No newline at end of file
131 }
132
......
...@@ -4,143 +4,78 @@ ...@@ -4,143 +4,78 @@
4 <div class="bg"> 4 <div class="bg">
5 <dv-loading v-if="loading">Loading...</dv-loading> 5 <dv-loading v-if="loading">Loading...</dv-loading>
6 <div v-else class="host-body"> 6 <div v-else class="host-body">
7 <div class="d-flex jc-center"> 7 <div class="header">
8 <dv-decoration-10 class="dv-dec-10" /> 8 <div class="d-flex head">
9 <div class="d-flex jc-center"> 9 <dv-decoration-10 class="dv-dec-10" />
10 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" /> 10 <div class="d-flex">
11 <div class="title"> 11 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
12 <span class="title-text">大数据可视化平台</span> 12 <div class="title">
13 <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> 13 <span class="title-text">汉中市不动产监管大屏</span>
14 <dv-decoration-5
15 :dur="1"
16 class="dv-dec-5"
17 :color="decorationColor"
18 />
19 </div>
20 <dv-decoration-8
21 class="dv-dec-8"
22 :reverse="true"
23 :color="decorationColor"
24 />
14 </div> 25 </div>
15 <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" /> 26 <dv-decoration-10 class="dv-dec-10-s" />
16 </div> 27 </div>
17 <dv-decoration-10 class="dv-dec-10-s" />
18 </div> 28 </div>
19 29 <div class="content">
20 <!-- 第二行 --> 30 <leftcard/>
21 <div class="d-flex jc-between px-2"> 31 <centercard/>
22 <div class="d-flex aside-width"> 32 <rightcard/>
23 <div class="react-left ml-4 react-l-s">
24 <span class="react-left"></span>
25 <span class="text">数据分析1</span>
26 </div>
27 <div class="react-left ml-3">
28 <span class="text">数据分析2</span>
29 </div>
30 </div>
31 <div class="d-flex aside-width">
32 <div class="react-right bg-color-blue mr-3">
33 <span class="text fw-b">vue-big-screen</span>
34 </div>
35 <div class="react-right mr-4 react-l-s">
36 <span class="react-after"></span>
37 <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
38 </div>
39 </div>
40 </div>
41
42 <div class="body-box">
43 <!-- 第三行数据 -->
44 <div class="content-box">
45 <div>
46 <dv-border-box-12>
47 <centerLeft1 />
48 </dv-border-box-12>
49 </div>
50 <div>
51 <dv-border-box-12>
52 <centerLeft2 />
53 </dv-border-box-12>
54 </div>
55 <!-- 中间 -->
56 <div>
57 <center />
58 </div>
59 <!-- 中间 -->
60 <div>
61 <centerRight2 />
62 </div>
63 <div>
64 <dv-border-box-13>
65 <centerRight1 />
66 </dv-border-box-13>
67 </div>
68 </div>
69
70 <!-- 第四行数据 -->
71 <div class="bottom-box">
72 <dv-border-box-13>
73 <bottomLeft />
74 </dv-border-box-13>
75 <dv-border-box-12>
76 <bottomRight />
77 </dv-border-box-12>
78 </div>
79 </div> 33 </div>
80 </div> 34 </div>
81 </div> 35 </div>
82 </div> 36 </div>
83 </div> 37 </div>
84
85 </template> 38 </template>
86 39
87 <script> 40 <script>
88 import drawMixin from "../../utils/drawMixin"; 41 import drawMixin from "../../utils/drawMixin";
89 import { formatTime } from '../../utils/index.js' 42 import leftcard from './leftcard'
90 import centerLeft1 from './centerLeft1' 43 import centercard from './centercard'
91 import centerLeft2 from './centerLeft2' 44 import rightcard from './rightcard'
92 import centerRight1 from './centerRight1'
93 import centerRight2 from './centerRight2'
94 import center from './center'
95 import bottomLeft from './bottomLeft'
96 import bottomRight from './bottomRight'
97
98 export default { 45 export default {
99 mixins: [drawMixin], 46 mixins: [drawMixin],
100 data () { 47 data() {
101 return { 48 return {
102 timing: null, 49 decorationColor: ["#568aea", "#568aea"],
103 loading: true, 50 };
104 dateDay: null,
105 dateYear: null,
106 dateWeek: null,
107 weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
108 decorationColor: ['#568aea', '#000000']
109 }
110 }, 51 },
111 components: { 52 components: {
112 centerLeft1, 53 leftcard,centercard,rightcard
113 centerLeft2,
114 centerRight1,
115 centerRight2,
116 center,
117 bottomLeft,
118 bottomRight
119 }, 54 },
120 mounted () { 55 mounted() {
121 this.timeFn() 56 // this.timeFn();
122 this.cancelLoading() 57 this.cancelLoading();
123 }, 58 },
124 beforeDestroy () { 59 beforeDestroy() {
125 clearInterval(this.timing) 60 clearInterval(this.timing);
126 }, 61 },
127 methods: { 62 methods: {
128 timeFn () { 63 // timeFn() {
129 this.timing = setInterval(() => { 64 // this.timing = setInterval(() => {
130 this.dateDay = formatTime(new Date(), 'HH: mm: ss') 65 // this.dateDay = formatTime(new Date(), "HH: mm: ss");
131 this.dateYear = formatTime(new Date(), 'yyyy-MM-dd') 66 // this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
132 this.dateWeek = this.weekday[new Date().getDay()] 67 // this.dateWeek = this.weekday[new Date().getDay()];
133 }, 1000) 68 // }, 1000);
134 }, 69 // },
135 cancelLoading () { 70 cancelLoading() {
136 setTimeout(() => { 71 setTimeout(() => {
137 this.loading = false 72 this.loading = false;
138 }, 500) 73 }, 500);
139 } 74 },
140 } 75 },
141 } 76 };
142 </script> 77 </script>
143 78
144 <style lang="scss" scoped> 79 <style scoped lang="scss">
145 @import './index.scss'; 80 @import "./index.scss";
146 </style> 81 </style>
......
1 <template>
2 <div class="leftcard">
3 <div class="card1">
4 <div class="cardhead">区县接入</div>
5 <div class="cardcontent">
6 <div class="text1">
7 <p>52343</p>
8 <p>总量</p>
9 </div>
10 <div class="text2">
11 <p>666</p>
12 <p>失败</p>
13 </div>
14 <div class="text3">
15 <p>99%</p>
16 <p>成功率</p>
17 </div>
18 </div>
19 </div>
20 <div class="card2">
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 <columnar />
40 </div>
41 </div>
42 </template>
43
44 <script>
45 import columnar from "@/components/echart/columnar";
46 export default {
47
48 data() {
49 return {
50
51 };
52 },
53 components: { columnar },
54 mounted() {
55 },
56 beforeDestroy() {
57
58 },
59 methods: {
60
61 },
62 };
63 </script>
64
65 <style lang="scss" scoped>
66 .leftcard{
67 width: 25%;
68 height: 100%;
69 .cardhead{
70 width: 100%;
71 height: 40px;
72 margin-left: 10px;
73 line-height: 40px;
74 color: rgb(27, 185, 206);
75 font-size: 26px;
76 }
77 .cardcontent{
78 width: 100%;
79 height: 160px;
80 display: flex;
81 .text1{
82 width: 33%;
83 height: 100%;
84 p{
85 height: 70px;
86 line-height: 70px;
87 font-size: 40px;
88 text-align: center;;
89
90 };
91 p:nth-child(2){
92 color: rgb(180, 178, 178);
93
94 };
95 }
96 .text2{
97 width: 33%;
98 height: 100%;
99 p{
100 height: 70px;
101 line-height: 70px;
102 font-size: 20px;
103 text-align: center;;
104 color: rgb(180, 178, 178);
105 };
106 }
107 .text3{
108 width: 33%;
109 height: 100%;
110 p{
111 height: 70px;
112 line-height: 70px;
113 font-size: 20px;
114 text-align: center;;
115 color: rgb(180, 178, 178);
116 };
117 }
118 }
119 .card1{
120 width: 100%;
121 height: 200px;
122 box-sizing: border-box;
123 background: url("~@/image/tablebk.png") no-repeat;
124 background-size: 100% 100%;
125
126 }
127 .card2{
128 width: 100%;
129 height: 200px;
130 box-sizing: border-box;
131 background: url("~@/image/tablebk.png") no-repeat;
132 background-size: 100% 100%;
133 }
134 .card3{
135 width: 100%;
136 height: 500px;
137 box-sizing: border-box;
138 background: url("~@/image/tablebk.png") no-repeat;
139 background-size: 100% 100%;
140 .mainCss{
141 width: 500px;
142 height:445px;
143 background-color: saddlebrown;
144 }
145 }
146 }
147
148 </style>
1 <template>
2 <div class="leftcard">
3 <div class="card1">
4 <div class="cardhead">区县接入</div>
5 <div class="cardcontent">
6 <div class="text1">
7 <p>52343</p>
8 <p>总量</p>
9 </div>
10 <div class="text2">
11 <p>666</p>
12 <p>失败</p>
13 </div>
14 <div class="text3">
15 <p>99%</p>
16 <p>成功率</p>
17 </div>
18 </div>
19 </div>
20 <div class="card2">
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>
42 </div>
43 </template>
44
45 <script>
46 import CenterLeft2Chart from "@/components/echart/map";
47 export default {
48
49 data() {
50 return {
51
52 };
53 },
54 components: { CenterLeft2Chart },
55 mounted() {
56 },
57 beforeDestroy() {
58
59 },
60 methods: {
61
62 },
63 };
64 </script>
65
66 <style lang="scss" scoped>
67 .leftcard{
68 width: 25%;
69 height: 100%;
70 .cardhead{
71 width: 100%;
72 height: 40px;
73 margin-left: 10px;
74 line-height: 40px;
75 color: rgb(27, 185, 206);
76 font-size: 26px;
77 }
78 .cardcontent{
79 width: 100%;
80 height: 160px;
81 display: flex;
82 .text1{
83 width: 33%;
84 height: 100%;
85 p{
86 height: 70px;
87 line-height: 70px;
88 font-size: 40px;
89 text-align: center;;
90
91 };
92 p:nth-child(2){
93 color: rgb(180, 178, 178);
94
95 };
96 }
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
110 };
111 }
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
124
125 };
126 }
127 }
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
135 }
136 .card2{
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%;
145 height: 500px;
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 }
156 </style>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
95 <script> 95 <script>
96 // 上报首页 96 // 上报首页
97 import wgsl from "./wgsl.vue"; 97 import wgsl from "./wgsl.vue";
98 import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart"; 98 import CenterLeft2Chart from "@/components/echart/map";
99 // 引入表格数据 99 // 引入表格数据
100 import data from "./data" 100 import data from "./data"
101 export default { 101 export default {
......