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)