Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
919a4047 by xiaomiao
Options

大屏

1 parent 2ba22067
Inline Side-by-side
Showing 25 changed files with 269 additions and 95 deletions
...@@ -40,6 +40,9 @@ export default { ...@@ -40,6 +40,9 @@ export default {
40 handler (options) { 40 handler (options) {
41 // 设置true清空echart缓存 41 // 设置true清空echart缓存
42 this.chart.setOption(options, true) 42 this.chart.setOption(options, true)
43 window.addEventListener('resize',()=>{
44 this.chart.resize()
45 })
43 }, 46 },
44 deep: true 47 deep: true
45 } 48 }
...@@ -58,9 +61,6 @@ export default { ...@@ -58,9 +61,6 @@ export default {
58 this.chart = this.$echarts.init(this.$el, 'tdTheme') 61 this.chart = this.$echarts.init(this.$el, 'tdTheme')
59 this.chart.setOption(this.options, true) 62 this.chart.setOption(this.options, true)
60 63
61 window.addEventListener("resize", function() {
62 this.chart.resize();
63 });
64 64
65 } 65 }
66 } 66 }
......
1 <template> 1 <template>
2 <!-- 柱状图 --> 2 <!-- 柱状图 -->
3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart> 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
4 </template> 4 </template>
5 5
6 <script> 6 <script>
......
1 <template> 1 <template>
2 <!-- 地图 --> 2 <!-- 地图 -->
3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="53vh" 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart":key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
4 :options="options"></Echart> 4 :options="options"></Echart>
5 </template> 5 </template>
6 6
...@@ -27,8 +27,7 @@ export default { ...@@ -27,8 +27,7 @@ export default {
27 mounted() { 27 mounted() {
28 window.addEventListener("resize", () => { 28 window.addEventListener("resize", () => {
29 this.key++ 29 this.key++
30 }); 30 }); },
31 },
32 watch: { 31 watch: {
33 cdata: { 32 cdata: {
34 handler (newData) { 33 handler (newData) {
......
1 <template> 1 <template>
2 <Echart 2 <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart>
3 :options="options"
4 id="centreLeft1Chart"
5 :key="key"
6 height="225px"
7 width="80%"
8 ></Echart>
9 </template> 3 </template>
10 <script> 4 <script>
11 import Echart from "@/common/echart"; 5 import Echart from '@/common/echart'
12 export default { 6 export default {
13 components: { 7 components: {
14 Echart, 8 Echart,
15 }, 9 },
16 data() { 10 data() {
17 return { 11 return {
18 key: 0, 12 key:0
19 }; 13 }
20 }, 14 },
21 props: { 15 props: {
22 cdata: { 16 cdata: {
23 type: Object, 17 type: Object,
24 default: () => ({}), 18 default: () => ({})
25 }, 19 },
26 }, 20 },
27 mounted() {
28 window.addEventListener("resize", () => {
29 this.key++;
30 });
31 },
32 watch: { 21 watch: {
33 cdata: { 22 cdata: {
34 handler(newData) { 23 handler (newData) {
24 console.log("newData",newData);
35 this.options = { 25 this.options = {
36 series: [ 26 grid: {
37 { 27 right:"1%",
38 name: "Access From", 28 bottom:"4%"
39 type: "pie",
40 center: "65%",
41 radius: "50%",
42 data: newData.seriesData,
43 emphasis: {
44 itemStyle: {
45 shadowBlur: 10,
46 shadowOffsetX: 0,
47 shadowColor: "rgba(0, 0, 0, 0.5)",
48 }, 29 },
30 color: [
31 "#37a2da",
32 "#32c5e9",
33 "#9fe6b8",
34 "#ffdb5c",
35 "#ff9f7f",
36 "#fb7293",
37 "#e7bcf3",
38 "#8378ea"
39 ],
40 tooltip: {
41 trigger: "item",
42 formatter: "{a} <br/>{b} : {c} ({d}%)"
49 }, 43 },
44 toolbox: {
45 show: true
50 }, 46 },
47 calculable: true,
48 series: [
49 {
50 name: "业务量",
51 type: "pie",
52 radius: [0,100],
53 roseType: "area",
54 data: newData.seriesData
55 }
51 ], 56 ],
52 }; 57
53 this.key++; 58 }
59 this.key++
54 }, 60 },
55 immediate: true, 61 immediate: true,
56 deep: true, 62 deep: true
57 }, 63 }
58 }, 64 }
59 }; 65 };
60 </script> 66 </script>
61 67
62 <style lang="scss" scoped></style> 68 <style lang="scss" scoped>
69 #centreLeft1Chart {
70 margin-bottom: 10px;
71 margin-left: 60px;
72 }
73 </style>
......

14.1 KB | W: | H:

17.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

16.8 KB | W: | H:

20 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 // 来自 https://github.com/amfe/lib-flexible/blob/2.0/index.js
2 (function flexible(window, document) {
3 var docEl = document.documentElement;
4 // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
5 var dpr = window.devicePixelRatio || 1;
6
7 //根据分辨率调整全局字体大小
8 function setBodyFontSize() {
9 // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
10 if (document.body) {
11 document.body.style.fontSize = 12 * dpr + "px";
12 } else {
13 // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
14 document.addEventListener("DOMContentLoaded", setBodyFontSize);
15 }
16 }
17 setBodyFontSize();
18
19 // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
20 function setRemUnit() {
21 var rem = docEl.clientWidth / 10;
22 // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
23 docEl.style.fontSize = rem + "px";
24 }
25
26 setRemUnit();
27
28 // 监听resize事件——屏幕大小发生变化时触发
29 window.addEventListener("resize", setRemUnit);
30 // 监听pageshow事件——显示页面时触发
31 window.addEventListener("pageshow", function(e) {
32 // 若是浏览器中点击后退时显示页面，则重置rem
33 if (e.persisted) {
34 setRemUnit();
35 }
36 });
37
38 // 检测是否支持0.5px
39 if (dpr >= 2) {
40 var fakeBody = document.createElement("body");
41 var testElement = document.createElement("div");
42 testElement.style.border = ".5px solid transparent";
43 fakeBody.appendChild(testElement);
44 docEl.appendChild(fakeBody);
45 if (testElement.offsetHeight === 1) {
46 docEl.classList.add("hairlines");
47 }
48 docEl.removeChild(fakeBody);
49 }
50 })(window, document);
51
1 <template>
2 <div
3 class="ScaleBox"
4 ref="ScaleBox"
5 :style="{
6 width: width + 'px',
7 height: height + 'px',
8 }"
9 >
10 <slot></slot>
11 </div>
12 </template>
13
14 <script>
15 export default {
16 name: "ScaleBox",
17 props: {},
18 data() {
19 return {
20 scale: 0,
21 width: 1920,
22 height: 1080,
23 };
24 },
25 mounted() {
26 this.setScale();
27 window.addEventListener("resize", this.debounce(this.setScale));
28 },
29 methods: {
30 getScale() {
31 // 固定好16：9的宽高比，计算出最合适的缩放比
32 const { width, height } = this;
33 const wh = window.innerHeight / height;
34 const ww = window.innerWidth / width;
35 console.log(ww < wh ? ww : wh);
36 return ww < wh ? ww : wh;
37 },
38 setScale() {
39 // 获取到缩放比例，设置它
40 this.scale = this.getScale();
41 if (this.$refs.ScaleBox) {
42 this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
43 }
44 },
45 debounce(fn, delay) {
46 const delays = delay || 500;
47 let timer;
48 return function () {
49 const th = this;
50 const args = arguments;
51 if (timer) {
52 clearTimeout(timer);
53 }
54 timer = setTimeout(function () {
55 timer = null;
56 fn.apply(th, args);
57 }, delays);
58 };
59 },
60 },
61 };
62 </script>
63
64 <style lang="scss">
65 #ScaleBox {
66 --scale: 1;
67 }
68 .ScaleBox {
69 position: absolute;
70 transform: scale(var(--scale)) translate(-50%, -50%);
71 display: flex;
72 flex-direction: column;
73 transform-origin: 0 0;
74 left: 50%;
75 top: 50%;
76 transition: 0.1s;
77 z-index: 999;
78 // background: rgba(255, 0, 0, 0.3);
79 }
80 </style>
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
29 width: 44%; 29 width: 44%;
30 height: calc(100vh - 114px); 30 height: calc(100vh - 114px);
31 box-sizing: border-box; 31 box-sizing: border-box;
32 padding: 0 10px; 32 padding: 0 .0521rem;
33 display: flex; 33 display: flex;
34 flex-direction: column; 34 flex-direction: column;
35 35
...@@ -38,17 +38,18 @@ export default { ...@@ -38,17 +38,18 @@ export default {
38 background: url("~@/image/mapcenter.png") no-repeat; 38 background: url("~@/image/mapcenter.png") no-repeat;
39 background-size: 100% 100%; 39 background-size: 100% 100%;
40 position: relative; 40 position: relative;
41 height: 64%;
41 42
42 .title { 43 .title {
43 position: absolute; 44 position: absolute;
44 font-weight: bold; 45 font-weight: bold;
45 color: #02D9FD; 46 color: #02D9FD;
46 line-height: 26px; 47 line-height: .1354rem;
47 font-size: 22px; 48 font-size: .1146rem;
48 position: absolute; 49 position: absolute;
49 left: 0; 50 left: 0;
50 right: 0; 51 right: 0;
51 top: 7px; 52 top: .0365rem;
52 text-align: right; 53 text-align: right;
53 padding-right: 15%; 54 padding-right: 15%;
54 } 55 }
...@@ -60,23 +61,20 @@ export default { ...@@ -60,23 +61,20 @@ export default {
60 background-size: 100% 100%; 61 background-size: 100% 100%;
61 position: relative; 62 position: relative;
62 flex: 1; 63 flex: 1;
63 height: 100%;
64 width: 100%;
65 64
66 .title { 65 .title {
67 position: absolute; 66 position: absolute;
68 font-weight: bold; 67 font-weight: bold;
69 color: #02D9FD; 68 color: #02D9FD;
70 line-height: 26px; 69 line-height: .1354rem;
71 font-size: 22px; 70 font-size: .1146rem;
72 position: absolute; 71 position: absolute;
73 left: 0; 72 left: 0;
74 right: 0; 73 right: 0;
75 top: 7px; 74 top: .0365rem;
76 text-align: center; 75 text-align: center;
77 margin-bottom: 10px; 76 margin-bottom: .0521rem;
78 } 77 }
79
80 .brokenline { 78 .brokenline {
81 margin: auto; 79 margin: auto;
82 width: 100%; 80 width: 100%;
......
...@@ -46,12 +46,7 @@ export default { ...@@ -46,12 +46,7 @@ export default {
46 screencontent, 46 screencontent,
47 }, 47 },
48 mounted() { 48 mounted() {
49 window.addEventListener("resize", () => { 49
50 this.isshow=false
51 });
52 window.addEventListener("resize", () => {
53 this.isshow=true
54 });
55 // this.timeFn(); 50 // this.timeFn();
56 this.cancelLoading(); 51 this.cancelLoading();
57 }, 52 },
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 <div class="card mt-15"> 26 <div class="carda mt-15">
27 <div class="cardhead">省厅汇交</div> 27 <div class="cardhead">省厅汇交</div>
28 <div class="cardcontent"> 28 <div class="cardcontent">
29 <ul class="cardcontent-left d-center"> 29 <ul class="cardcontent-left d-center">
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
54 </template> 54 </template>
55 55
56 <script> 56 <script>
57
57 import columnar from "@/components/Echart/Columnar"; 58 import columnar from "@/components/Echart/Columnar";
58 import work from "@/api/work"; 59 import work from "@/api/work";
59 export default { 60 export default {
...@@ -118,19 +119,39 @@ export default { ...@@ -118,19 +119,39 @@ export default {
118 <style lang="scss" scoped> 119 <style lang="scss" scoped>
119 .leftcard { 120 .leftcard {
120 width: 32%; 121 width: 32%;
121 height: calc(100% -110px); 122 height: calc(100% -0.5729rem);
122 display: flex; 123 display: flex;
123 flex-direction: column; 124 flex-direction: column;
124 125
125 .card { 126 .card {
126 background: url("~@/image/homeLeftBg.png") no-repeat; 127 background: url("~@/image/qxjr.png") no-repeat;
128 background-size: 100% 100%;
129 position: relative;
130 text-align: center;
131 width: 100%;
132 height: 25%;
133 }
134 .carda {
135 background: url("~@/image/sthj.png") no-repeat;
127 background-size: 100% 100%; 136 background-size: 100% 100%;
128 position: relative; 137 position: relative;
129 height: 22%; 138 text-align: center;
139 width: 100%;
140 height: 25%;
130 } 141 }
131 142
143 // .card1 {
144 // background: url("~@/image/sbtj.png") no-repeat;
145 // background-size: 100% 100%;
146 // position: relative;
147 // text-align: center;
148 // width: 100%;
149 // padding: .0417rem 0;
150 // height: 49%;
151 // }
152
132 .card1 { 153 .card1 {
133 background: url("~@/image/qxsj.png") no-repeat; 154 background: url("~@/image/sbtj.png") no-repeat;
134 background-size: 100% 100%; 155 background-size: 100% 100%;
135 position: relative; 156 position: relative;
136 box-sizing: border-box; 157 box-sizing: border-box;
...@@ -140,10 +161,10 @@ export default { ...@@ -140,10 +161,10 @@ export default {
140 161
141 .cardhead { 162 .cardhead {
142 color: #02d9fd; 163 color: #02d9fd;
143 line-height: 24px; 164 line-height: .125rem;
144 letter-spacing: 2px; 165 letter-spacing: .0104rem;
145 position: absolute; 166 position: absolute;
146 font-size: 20px; 167 font-size: .1042rem;
147 left: 0; 168 left: 0;
148 right: 0; 169 right: 0;
149 margin: auto; 170 margin: auto;
...@@ -154,7 +175,7 @@ export default { ...@@ -154,7 +175,7 @@ export default {
154 175
155 .rjjrlList { 176 .rjjrlList {
156 display: flex; 177 display: flex;
157 margin-top: 15px; 178 margin-top: .01781rem;
158 179
159 .qxjr { 180 .qxjr {
160 background: url("~@/image/jrl3.png"); 181 background: url("~@/image/jrl3.png");
...@@ -165,12 +186,12 @@ export default { ...@@ -165,12 +186,12 @@ export default {
165 } 186 }
166 187
167 p { 188 p {
168 margin: 0 3px 10px 3px; 189 margin: 0 .0156rem .0521rem .0156rem;
169 font-weight: 700; 190 font-weight: 700;
170 width: 24px; 191 width: .125rem;
171 height: 36px; 192 height: .1875rem;
172 font-size: 30px; 193 font-size: .1563rem;
173 font-size: 32px; 194 font-size: .1667rem;
174 } 195 }
175 } 196 }
176 197
...@@ -178,6 +199,7 @@ export default { ...@@ -178,6 +199,7 @@ export default {
178 width: 100%; 199 width: 100%;
179 height: 100%; 200 height: 100%;
180 display: flex; 201 display: flex;
202 // padding: 35px 20px 20px 20px;
181 box-sizing: border-box; 203 box-sizing: border-box;
182 color: #e3f1ff; 204 color: #e3f1ff;
183 205
...@@ -185,15 +207,18 @@ export default { ...@@ -185,15 +207,18 @@ export default {
185 width: 60%; 207 width: 60%;
186 flex-direction: column; 208 flex-direction: column;
187 position: relative; 209 position: relative;
210 li{
211 font-size: .1042rem;
212 }
188 } 213 }
189 214
190 .cardcontent-left::before { 215 .cardcontent-left::before {
191 position: absolute; 216 position: absolute;
192 right: 0; 217 right: 0;
193 top: 20px; 218 top: .3042rem;
194 content: ""; 219 content: "";
195 width: 1px; 220 width: .0052rem;
196 height: 90px; 221 height: .4688rem;
197 background: linear-gradient(180deg, 222 background: linear-gradient(180deg,
198 #091b4c 0%, 223 #091b4c 0%,
199 #47b5e0 56%, 224 #47b5e0 56%,
...@@ -204,7 +229,7 @@ export default { ...@@ -204,7 +229,7 @@ export default {
204 flex: 1; 229 flex: 1;
205 width: 100%; 230 width: 100%;
206 flex-direction: column; 231 flex-direction: column;
207 font-size: 16px; 232 font-size: .0833rem;
208 233
209 .bad { 234 .bad {
210 color: #c97168; 235 color: #c97168;
...@@ -215,14 +240,14 @@ export default { ...@@ -215,14 +240,14 @@ export default {
215 } 240 }
216 241
217 p { 242 p {
218 margin-bottom: 8px; 243 margin-bottom: .0417rem;
219 244
220 span:nth-child(1) { 245 span:nth-child(1) {
221 margin-right: 15px; 246 margin-right: .0781rem;
222 } 247 }
223 248
224 span:nth-child(2) { 249 span:nth-child(2) {
225 font-size: 20px; 250 font-size: .1042rem;
226 font-weight: 900; 251 font-weight: 900;
227 } 252 }
228 } 253 }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="rightcard"> 2 <div class="rightcard">
3 <div class="card1 cardCon d-center"> 3 <div class="card1 cardCon d-center">
4 <div class="cardhead">新建国有房屋信息</div> 4 <div class="cardhead">新建国有房屋信息</div>
5 <div class="cardcontent" style="margin-top: 70px"> 5 <div class="cardcontent" style="margin-top: .3646rem">
6 <dv-scroll-board :config="config" class="board" /> 6 <dv-scroll-board :config="config" class="board" />
7 </div> 7 </div>
8 </div> 8 </div>
...@@ -51,64 +51,69 @@ export default { ...@@ -51,64 +51,69 @@ export default {
51 </script> 51 </script>
52 <style lang="scss" scoped> 52 <style lang="scss" scoped>
53 /deep/.row-item:not(:last-child) { 53 /deep/.row-item:not(:last-child) {
54 margin-bottom: 5px; 54 margin-bottom: .026rem;
55 } 55 }
56 56
57 .rightcard { 57 .rightcard {
58 width: 32%; 58 width: 32%;
59 display: flex; 59 display: flex;
60 height: calc(100% -94px); 60 height: calc(100vh - 114px);
61 flex-direction: column; 61 flex-direction: column;
62 62
63 .cardhead { 63 .cardhead {
64 font-size: 20px; 64 font-size: .1042rem;
65 font-weight: bold; 65 font-weight: bold;
66 color: #02D9FD; 66 color: #02D9FD;
67 text-align: center; 67 text-align: center;
68 position: absolute; 68 position: absolute;
69 left: 0; 69 left: 0;
70 right: 0; 70 right: 0;
71 top: 12px; 71 top: .0625rem;
72 text-align: center; 72 text-align: center;
73 } 73 }
74 74
75 .cardcontent { 75 .cardcontent {
76 width: 100%; 76 width: 100%;
77 height: 100%; 77 height: 100%;
78 display: -webkit-box;
79 overflow: hidden;
78 } 80 }
79 81
80 .cardCon { 82 .cardCon {
83 padding: .0521rem .026rem;
81 position: relative; 84 position: relative;
82 text-align: center; 85 text-align: center;
83 width: 100%; 86 width: 100%;
84 } 87 }
85 88
86 .card1 { 89 .card1 {
87 width: 100%; 90 height: 33%;
88 height: 30%; 91 background: url("~@/image/xjgyfwxx.png") no-repeat;
89 background: url("~@/image/homeLeftBg.png") no-repeat;
90 background-size: 100% 100%; 92 background-size: 100% 100%;
91 93
92 .board { 94 .board {
93 width: 90%; 95 width: 90%;
94 margin: 0 auto; 96 margin: 0 auto;
95 height: 135px; 97 height: .7031rem;
96 margin-top: 40px; 98 margin-top: .2083rem;
97 } 99 }
98 } 100 }
99 101
100 .card2 { 102 .card2 {
101 height: 31%; 103 height: 33%;
102 background: url("~@/image/djywl.png") no-repeat; 104 background: url("~@/image/djywl.png") no-repeat;
103 background-size: 100% 100%; 105 background-size: 100% 100%;
106 padding: .2825rem 0 0 0;
104 } 107 }
105 108
106 .card3 { 109 .card3 {
110 height: 33%;
107 flex: 1; 111 flex: 1;
108 background: url("~@/image/lxzl.png") no-repeat; 112 background: url("~@/image/djlxzl.png") no-repeat;
109 background-size: 100% 100%; 113 background-size: 100% 100%;
114 padding-bottom: 0;
110 .cardhead { 115 .cardhead {
111 top: 8px; 116 top: .0417rem;
112 } 117 }
113 } 118 }
114 119
......
1 <template> 1 <template>
2 <div class="content"> 2 <div class="content" id="box">
3 <leftcard /> 3 <leftcard />
4 <centercard /> 4 <centercard />
5 <rightcard /> 5 <rightcard />
6 </div> 6 </div>
7 </template> 7 </template>
8 <script> 8 <script>
9 import "@/utils/flexible.js";
10 import ScaleBox from "./box.vue";
9 import drawMixin from "@/utils/drawMixin"; 11 import drawMixin from "@/utils/drawMixin";
10 import leftcard from "./leftcard"; 12 import leftcard from "./leftcard";
11 import centercard from "./centercard"; 13 import centercard from "./centercard";
...@@ -21,6 +23,7 @@ export default { ...@@ -21,6 +23,7 @@ export default {
21 leftcard, 23 leftcard,
22 centercard, 24 centercard,
23 rightcard, 25 rightcard,
26 ScaleBox,
24 }, 27 },
25 mounted () { 28 mounted () {
26 // this.timeFn(); 29 // this.timeFn();
...@@ -46,6 +49,13 @@ export default { ...@@ -46,6 +49,13 @@ export default {
46 margin: auto; 49 margin: auto;
47 display: flex; 50 display: flex;
48 justify-content: space-between; 51 justify-content: space-between;
49 margin-top: 15px; 52
50 } 53 }
54 // #box{
55 // width: 1620px;
56 // height: 680px;
57 // position: absolute;
58 // transform-origin: left top;
59 // overflow: hidden;
60 // }
51 </style> 61 </style>
......