components_theme_vue.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8" />
  8. <title data-i18n="resources.title_componentsTheme_Vue"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script
  11. include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
  12. src="../../dist/mapboxgl/include-mapboxgl.js"
  13. ></script>
  14. <style>
  15. body {
  16. margin: 0;
  17. overflow: hidden;
  18. background: #fff;
  19. width: 100%;
  20. height: 100%;
  21. position: absolute;
  22. top: 0;
  23. }
  24. #main {
  25. margin: 0 auto;
  26. width: 100%;
  27. height: 100%;
  28. }
  29. .sm-chart .sm-card__content {
  30. width: 400px;
  31. height: 300px;
  32. position: absolute;
  33. bottom: 10px;
  34. right: 10px;
  35. }
  36. .box-card {
  37. width: 280px;
  38. position: absolute;
  39. top: 10px;
  40. right: 10px;
  41. z-index: 1000;
  42. overflow: hidden;
  43. }
  44. .radio-group {
  45. position: absolute;
  46. left: 10px;
  47. top: 10px;
  48. text-align: center;
  49. z-index: 1000;
  50. }
  51. .sm-progress-wrap {
  52. height: 110px;
  53. }
  54. .sm-progress-wrap,
  55. .sm-component-liquidFill {
  56. width: 110px;
  57. height: 110px;
  58. display: inline-block;
  59. }
  60. .sm-component-indicator {
  61. padding-left: 0px;
  62. }
  63. .sm-component-indicator .sm-component-indicator__head {
  64. padding-left: 0px;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div id="main">
  70. <!-- WebMap组件 -->
  71. <sm-web-map
  72. server-url="https://iportal.supermap.io/iportal"
  73. map-id="801571284"
  74. ref="map"
  75. @load.once="load"
  76. ></sm-web-map>
  77. <!-- 切换主题按钮组 -->
  78. <sm-radio-group class="radio-group" v-model="theme" @change="changeTheme">
  79. <sm-radio-button value="light">{{ resources.btn_lightTheme }}</sm-radio-button>
  80. <sm-radio-button value="dark">{{ resources.btn_darkTheme }}</sm-radio-button>
  81. <sm-radio-button value="custom">{{ resources.btn_customTheme }}</sm-radio-button>
  82. </sm-radio-group>
  83. <div class="box-card">
  84. <!-- 图标组件 -->
  85. <sm-icon icon-class="marker-layer" background="unset" size="18px" :style="{float: 'left'}"> </sm-icon>
  86. <!-- 文本组件 -->
  87. <sm-text
  88. title="点击图上点切换显示机场数据"
  89. :font-style='{ fontSize: "14px",display: "block"}'
  90. text-color="#333"
  91. ></sm-text>
  92. <sm-text
  93. title="机场"
  94. :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}'
  95. text-color="rgb(51,51,51)"
  96. style="width: 280px"
  97. >
  98. </sm-text>
  99. <sm-text
  100. :title="name"
  101. :font-style='{ fontSize: "18px", color:"#73b9ac", fontWeight: "700" ,display: "block"}'
  102. style="width: 100%"
  103. >
  104. </sm-text>
  105. <!-- 指标组件 -->
  106. <sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" style="width: 100%"> </sm-indicator>
  107. <sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" style="width: 100%"></sm-indicator>
  108. <sm-text
  109. title="同比增速"
  110. :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}'
  111. text-color="rgb(51,51,51)"
  112. ></sm-text>
  113. <div :style="divStyle">
  114. <!-- 水球组件 -->
  115. <sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" :wave-animation="true" style="width:100%"> </sm-liquid-fill>
  116. </div>
  117. <!-- 时间组件 -->
  118. <sm-time-text
  119. :font-style='{ fontSize: "12px"}'
  120. text-color="#333"
  121. time-type="date+second"
  122. style="float:right;width:100%"
  123. >
  124. </sm-time-text>
  125. </div>
  126. </div>
  127. <script>
  128. new Vue({
  129. el: '#main',
  130. data() {
  131. return {
  132. theme: 'light',
  133. name: '北京/首都',
  134. passengerNumber: 95786296,
  135. goodsNumber: 94393454,
  136. speedIncrease: 35,
  137. divStyle: {
  138. background: 'rgba(255, 255, 255)'
  139. }
  140. };
  141. },
  142. computed: {
  143. speedIncreaseValue() {
  144. return this.speedIncrease / 100.0;
  145. }
  146. },
  147. methods: {
  148. changeTheme: function(e) {
  149. var themeList = {
  150. dark: {
  151. background: 'rgba(255, 255, 255, 0.04)', //例子中布局div的背景色,
  152. themeInfo: 'dark'
  153. },
  154. light: {
  155. background: 'rgba(255, 255, 255)', //例子中布局div的背景色,
  156. themeInfo: 'light'
  157. },
  158. other: {
  159. background: 'rgb(91, 92, 110)', //例子中布局div的背景色
  160. themeInfo: {
  161. textColor: '#eee',
  162. background: 'rgb(91, 92, 110)',
  163. componentBackground: 'rgb(91, 92, 110)',
  164. colorGroup: [
  165. 'rgb(138, 124, 168)',
  166. 'rgb(224, 152, 199)',
  167. 'rgb(143, 211, 232)',
  168. 'rgb(113, 102, 158)',
  169. 'rgb(204, 112, 175)'
  170. ]
  171. }
  172. }
  173. };
  174. var theme = themeList[e.target.value];
  175. if(!theme) {
  176. theme = themeList['other'];
  177. }
  178. this.divStyle.background = theme.background;
  179. SuperMap.Components.setTheme(theme.themeInfo);
  180. // if (theme === 'dark') {
  181. // this.divStyle.background = 'rgba(0, 0, 0, 0.6)'; //例子中布局div的背景色
  182. // //切换组件主题为内置主题dark
  183. // SuperMap.Components.setTheme(theme);
  184. // } else if (theme === 'light') {
  185. // this.divStyle.background = 'rgba(255, 255, 255, 0.6)'; //例子中布局div的背景色
  186. // //切换组件主题为内置主题light
  187. // SuperMap.Components.setTheme(theme);
  188. // } else {
  189. // this.divStyle.background = 'rgb(91, 92, 110)'; //例子中布局div的背景色
  190. // //切换组件主题为自定义主题
  191. // SuperMap.Components.setTheme();
  192. // }
  193. },
  194. load(obj) {
  195. var vm = this;
  196. map = obj.map;
  197. map.on('click', function(e) {
  198. var bbox = [[e.point.x - 2, e.point.y - 2], [e.point.x + 2, e.point.y + 2]];
  199. var features = map.queryRenderedFeatures(bbox);
  200. if (features.length > 0) {
  201. var properties = features[0].properties;
  202. vm.name = properties['机场'];
  203. vm.passengerNumber = properties['2017旅客吞吐量(人次)'] || 0;
  204. vm.goodsNumber = properties['2017货邮吞吐量(吨)'] || 0;
  205. vm.speedIncrease = properties['同比增速%'] || 0;
  206. }
  207. });
  208. }
  209. }
  210. });
  211. </script>
  212. </body>
  213. </html>