Skip to content

Commit ad11083

Browse files
xiongjiaojiaoxiongjiaojiao
committed
update 房产项目大屏模板代码优化，review by songym
1 parent 07facec commit ad11083

File tree

1 file changed

+46
-88
lines changed

1 file changed

+46
-88
lines changed

‎examples/mapboxgl/components_estateMonitoringPlatform_vue.html

Lines changed: 46 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -27,111 +27,76 @@
2727
overflow: auto;
2828
}
2929
}
30-
31-
@media screen and (max-height: 640px) {
32-
#main {
33-
overflow: auto;
34-
}
35-
}
3630
</style>
3731
</head>
3832

3933
<body style="margin: 0;background: #fff;">
4034
<div id="main">
4135
<a-row id="map-row">
4236
<a-col :md="6">
43-
<sm-time-text timeType="date" :font-style="{fontSize: '0.73vw'}" background="transparent"
44-
text-color="#f2f2f2">
37+
<sm-time-text timeType="date">
4538
</sm-time-text>
4639
<div class="year-plan-wrap">
47-
<sm-text
48-
:font-style="{fontSize: '0.94vw', lineHeight: '1.67vw', textAlign: 'center', fontWeight: 'bolder'}"
49-
background="transparent" text-color="#fff" title="年度计划"></sm-text>
40+
<sm-text :font-style="{lineHeight: '1.67vw'}" title="年度计划"></sm-text>
5041
<div class="progress-holder">
5142
<div class="progress-item">
52-
<sm-progress type="circle" stroke-color="#15D1F2" text-color="#fff" :percent="55"
53-
:stroke-width="8">
43+
<sm-progress type="circle" :percent="55" :stroke-width="8">
5444
</sm-progress>
55-
<sm-text
56-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
57-
background="transparent" text-color="#fff" title="销售金额"></sm-text>
45+
<sm-text title="销售金额"></sm-text>
5846
</div>
5947
<div class="progress-item">
60-
<sm-progress type="circle" :stroke-width="8" stroke-color="#15D1F2" text-color="#fff"
61-
:percent="35">
48+
<sm-progress type="circle" :stroke-width="8" :percent="35">
6249
</sm-progress>
63-
<sm-text
64-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
65-
text-color="#fff" background="transparent" title="销售回款"></sm-text>
50+
<sm-text title="销售回款"></sm-text>
6651
</div>
6752
<div class="progress-item">
68-
<sm-progress type="circle" :stroke-width="8" stroke-color="#15D1F2" text-color="#fff"
69-
:percent="60">
53+
<sm-progress type="circle" :stroke-width="8" :percent="60">
7054
</sm-progress>
71-
<sm-text
72-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
73-
text-color="#fff" background="transparent" title="营业收入"></sm-text>
55+
<sm-text title="营业收入"></sm-text>
7456
</div>
7557
<div class="progress-item">
76-
<sm-progress type="circle" :stroke-width="8" stroke-color="#15D1F2" text-color="#fff"
77-
:percent="40"></sm-progress>
78-
<sm-text
79-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
80-
text-color="#fff" background="transparent" title="净利润"></sm-text>
58+
<sm-progress type="circle" :stroke-width="8" :percent="40"></sm-progress>
59+
<sm-text title="净利润"></sm-text>
8160
</div>
8261
</div>
8362
</div>
8463
</a-col>
8564
<a-col :md="12">
86-
<sm-text
87-
:font-style="{fontSize: '1.82vw', lineHeight: '2.6vw', textAlign: 'center', fontWeight: 'bolder'}"
88-
background="transparent" text-color="#fff" title="房产项目可视化监控平台"></sm-text>
65+
<sm-text :font-style="{fontSize: '1.82vw', lineHeight: '2.6vw'}" title="房产项目可视化监控平台"></sm-text>
8966
<div class="indicator-holder">
90-
<sm-indicator title="土地出让金" unit="亿元" num="12320000" text-color="#fff" background="transparent">
67+
<sm-indicator title="土地出让金" unit="亿元" num="12320000">
9168
</sm-indicator>
92-
<sm-indicator title="回款金额" unit="元" num="12320000" text-color="#fff" background="transparent">
69+
<sm-indicator title="回款金额" unit="元" num="12320000">
9370
</sm-indicator>
94-
<sm-indicator title="净利润" unit="元" num="12320000" text-color="#fff" background="transparent">
71+
<sm-indicator title="净利润" unit="元" num="12320000">
9572
</sm-indicator>
9673
</div>
9774
</a-col>
9875
<a-col :md="6">
99-
<sm-text
100-
:font-style="{fontSize: '0.94vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
101-
background="transparent" text-color="#fff" title="常规项目指标"></sm-text>
76+
<sm-text :font-style="{lineHeight: '1.35vw'}" title="常规项目指标"></sm-text>
10277
<div class="normal-index-progress-holder">
10378
<div class="progress-item">
104-
<sm-progress type="circle" stroke-color="#15D1F2" text-color="#fff" :percent="20"
105-
:stroke-width="10">
79+
<sm-progress type="circle" :percent="20" :stroke-width="10">
10680
</sm-progress>
107-
<sm-text
108-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
109-
background="transparent" text-color="#fff" title="施工类型"></sm-text>
81+
<sm-text title="施工类型"></sm-text>
11082
</div>
11183
<div class="progress-item">
112-
<sm-progress type="circle" stroke-color="#15D1F2" text-color="#fff" :percent="60"
113-
:stroke-width="10"> </sm-progress>
114-
<sm-text
115-
:font-style="{fontSize: '0.9375vw', lineHeight: '0.9375vw', textAlign: 'center', fontWeight: 'bolder'}"
116-
background="transparent" text-color="#fff" title="施工总进度"></sm-text>
84+
<sm-progress type="circle" :percent="60" :stroke-width="10"> </sm-progress>
85+
<sm-text title="施工总进度"></sm-text>
11786
</div>
11887
</div>
11988
</a-col>
12089
</a-row>
12190
<a-row>
12291
<a-col :md="6">
12392
<div class="chart-item">
124-
<sm-text
125-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
126-
background="transparent" text-color="#fff" title="销售金额统计"></sm-text>
127-
<sm-chart icon-class="" :options="saleAmountOption" :color-group="colorGroup">
93+
<sm-text title="销售金额统计"></sm-text>
94+
<sm-chart icon-class="" :options="saleAmountOption">
12895
</sm-chart>
12996
</div>
13097
<div class="chart-item">
131-
<sm-text
132-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
133-
background="transparent" text-color="#fff" title="销售回款趋势"></sm-text>
134-
<sm-chart icon-class="" :options="saleReturnOption" :color-group="colorGroup">
98+
<sm-text title="销售回款趋势"></sm-text>
99+
<sm-chart icon-class="" :options="saleReturnOption">
135100
</sm-chart>
136101
</div>
137102
</a-col>
@@ -144,57 +109,44 @@
144109
</a-col>
145110
<a-col :md="6">
146111
<div class="chart-item">
147-
<sm-text
148-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
149-
background="transparent" text-color="#fff" title="库存指标"></sm-text>
150-
<sm-chart icon-class="" :options="stockIndexOption" :color-group="colorGroup">
112+
<sm-text title="库存指标"></sm-text>
113+
<sm-chart icon-class="" :options="stockIndexOption">
151114
</sm-chart>
152115
</div>
153116
<div class="chart-item">
154-
<sm-text
155-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
156-
background="transparent" text-color="#fff" title="项目价值指标"></sm-text>
157-
<sm-progress type="circle" stroke-color="#20DFCB" text-color="#fff" :percent="80"
158-
:stroke-width="10">
117+
<sm-text title="项目价值指标"></sm-text>
118+
<sm-progress type="circle" :percent="80" :stroke-width="10">
159119
</sm-progress>
160120
</div>
161121
</a-col>
162122
</a-row>
163123
<a-row>
164124
<a-col :md="6">
165125
<div class="chart-item">
166-
<sm-text
167-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
168-
background="transparent" text-color="#fff" title="项目成本表"></sm-text>
169-
<sm-chart icon-class="" :options="projectCostOption" :color-group="colorGroup">
126+
<sm-text title="项目成本表"></sm-text>
127+
<sm-chart icon-class="" :options="projectCostOption">
170128
</sm-chart>
171129
</div>
172130
</a-col>
173131
<a-col :md="12">
174132
<div class="chart-holder">
175133
<div class="chart-item">
176-
<sm-text
177-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
178-
background="transparent" text-color="#fff" title="营业收入情况"></sm-text>
179-
<sm-chart icon-class="" :options="revenueOption" :color-group="colorGroup">
134+
<sm-text title="营业收入情况"></sm-text>
135+
<sm-chart icon-class="" :options="revenueOption">
180136
</sm-chart>
181137
</div>
182138
<div class="chart-item">
183-
<sm-text
184-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
185-
background="transparent" text-color="#fff" title="投资盈利情况"></sm-text>
186-
<sm-chart icon-class="" :options="investProfitOption" :color-group="colorGroup">
139+
<sm-text title="投资盈利情况"></sm-text>
140+
<sm-chart icon-class="" :options="investProfitOption">
187141
</sm-chart>
188142
</div>
189143

190144
</div>
191145
</a-col>
192146
<a-col :md="6">
193147
<div class="chart-item">
194-
<sm-text
195-
:font-style="{fontSize: '0.9vw', lineHeight: '1.35vw', textAlign: 'center', fontWeight: 'bolder'}"
196-
background="transparent" text-color="#fff" title="库存情况"></sm-text>
197-
<sm-chart icon-class="" :options="stockSituationOption" :color-group="colorGroup">
148+
<sm-text title="库存情况"></sm-text>
149+
<sm-chart icon-class="" :options="stockSituationOption">
198150
</sm-chart>
199151
</div>
200152
</a-col>
@@ -204,11 +156,6 @@
204156

205157
<script>
206158
//本示例数据纯属虚构
207-
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
208-
var attribution =
209-
"<a href='https://www.mapbox.com/about/maps/' target='_blank'> Mapbox </a>" +
210-
" with <span> <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
211-
" Map Data <span> <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
212159
new Vue({
213160
el: "#main",
214161
data() {
@@ -248,6 +195,13 @@
248195
...estatePlatformDatas
249196
};
250197
},
198+
mounted() {
199+
SuperMap.Components.setTheme({
200+
background: 'transparent',
201+
textColor: '#fff',
202+
colorGroup: this.colorGroup
203+
});
204+
},
251205
methods: {
252206
changeTheme() {
253207
if (this.theme === 'dark') {
@@ -292,6 +246,10 @@
292246
<style>
293247
#main .sm-component-text {
294248
display: block;
249+
font-weight: bold;
250+
text-align: center;
251+
font-size: 0.94vw;
252+
line-height: 0.94vw;
295253
}
296254

297255
.ant-row .sm-component-time-text {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy