map.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <template>
  2. <div class="map">
  3. <div class="back"></div>
  4. <div class="security-days" v-if="fcId === '0'">
  5. <div class="text">安全天数:</div>
  6. <div class="num">
  7. <span class="font-num">{{safeDay}}</span>
  8. <span class="unit">天</span>
  9. </div>
  10. </div>
  11. <div class="tab-box">
  12. <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click.stop="selectTab(index, tab.show)">
  13. <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
  14. <SvgIcon :svgid="tab.icon"></SvgIcon>
  15. </span>
  16. <span>{{ tab.text }}</span>
  17. </div>
  18. </div>
  19. <div class="return" @click="backMap" v-show="mapName !== 'nx'">
  20. <span class="svg-icon svg-icon-sm">
  21. <svg-icon :svgid="'svg-arrow-dpwn-1'" />
  22. </span>
  23. 返回
  24. </div>
  25. <!-- 指南针 -->
  26. <div class="compass">
  27. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  28. <g id="渐变">
  29. <path
  30. fill-rule="evenodd"
  31. clip-rule="evenodd"
  32. fill="#000"
  33. opacity="0"
  34. d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
  35. c0,44.66-36.204,80.865-80.865,80.865c-44.661,0-80.865-36.205-80.865-80.865C19.658,54.86,55.863,18.655,100.523,18.655z"
  36. />
  37. </g>
  38. <g id="图层_2">
  39. <g>
  40. <g>
  41. <path
  42. fill-rule="evenodd"
  43. clip-rule="evenodd"
  44. fill="#606769"
  45. opacity="0.75"
  46. d="M100.523,56.301c-23.869,0-43.22,19.349-43.22,43.22 c0,23.869,19.351,43.219,43.22,43.219c23.87,0,43.22-19.35,43.22-43.219C143.743,75.65,124.394,56.301,100.523,56.301z M100.954,139.082c-21.765,0-39.414-17.648-39.414-39.416c0-21.77,17.649-39.418,39.414-39.418 c21.772,0,39.417,17.648,39.417,39.418C140.371,121.434,122.727,139.082,100.954,139.082z"
  47. />
  48. </g>
  49. </g>
  50. </g>
  51. <g id="图层_3">
  52. <g>
  53. <g>
  54. <path
  55. fill-rule="evenodd"
  56. clip-rule="evenodd"
  57. fill="#05BB4C"
  58. d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866 c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989 c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"
  59. />
  60. </g>
  61. </g>
  62. </g>
  63. <g id="图层_4">
  64. <g>
  65. <g>
  66. <path
  67. fill-rule="evenodd"
  68. clip-rule="evenodd"
  69. fill="#05BB4C"
  70. opacity="0.2"
  71. d="M100.582,4.724h-0.118c-52.356,0-94.797,42.441-94.797,94.798 c0,52.355,42.441,94.797,94.797,94.797h0.118c52.356,0,94.798-42.441,94.798-94.797C195.38,47.165,152.938,4.724,100.582,4.724z M101.169,189.813c-49.76,0-90.1-40.338-90.1-90.095c0-49.76,40.34-90.1,90.1-90.1c49.757,0,90.095,40.34,90.095,90.1 C191.264,149.475,150.926,189.813,101.169,189.813z"
  72. />
  73. </g>
  74. </g>
  75. </g>
  76. <g id="图层_1">
  77. <polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663" />
  78. </g>
  79. <g id="图层_7">
  80. <polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745" />
  81. </g>
  82. </svg>
  83. </div>
  84. <div class="map-img">
  85. <!-- 宁夏地图总览 -->
  86. <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
  87. <!-- 麻黄山风电场 -->
  88. <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj"></MHSFDC>
  89. </div>
  90. </div>
  91. </template>
  92. <script>
  93. // 宁夏地图总览
  94. import SvgMapNX from "./map/svg-map-nx.vue";
  95. // 麻黄山风电场
  96. import MHSFDC from "./map/MHS_FDC.vue";
  97. import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
  98. import compassIcon from "@/assets/icon/svg_fill/compass.svg";
  99. export default {
  100. // 名称
  101. name: "Map",
  102. // 使用组件
  103. components: {
  104. SvgMapNX,
  105. MHSFDC,
  106. SvgIcon,
  107. },
  108. props:{
  109. wpId:{
  110. type:String,
  111. default:"0"
  112. },
  113. day:{
  114. type:String,
  115. default:"---"
  116. },
  117. data:{
  118. type:Object,
  119. default:() => {}
  120. }
  121. },
  122. mounted(){
  123. this.fcId = this.wpId;
  124. this.safeDay = this.day;
  125. this.sourceMap = this.data;
  126. },
  127. // 数据
  128. data() {
  129. return {
  130. fcId:"",
  131. safeDay:"",
  132. showType: "all",
  133. sourceMap:{},
  134. tabs: [
  135. {
  136. icon: "svg-all",
  137. text: "全部",
  138. show: "all"
  139. },
  140. {
  141. icon: "svg-wind-site",
  142. text: "风场",
  143. show: "fc"
  144. },
  145. {
  146. icon: "svg-photovoltaic",
  147. text: "电站",
  148. show: "gf"
  149. },
  150. ],
  151. compassIcon: compassIcon,
  152. activeTab: 0,
  153. img: require("@assets/map/map-nx.png"),
  154. nxSvgFile: require("@assets/map/map-nx.svg"),
  155. mapName: "nx",
  156. };
  157. },
  158. // 函数
  159. methods: {
  160. selectTab(index, showType) {
  161. this.activeTab = index;
  162. this.showType = showType;
  163. let wpId = (showType === "all" ? "0" : showType === "fc" ? "-1" : "-2");
  164. this.safeDay = "---";
  165. this.mapName = "nx";
  166. this.$emit("mapClick", wpId);
  167. },
  168. backMap() {
  169. // this.mapName = "nx";
  170. // this.$emit("mapClick", wpId);
  171. },
  172. clickLabel(wpId) {
  173. this.mapName = wpId;
  174. this.$emit("mapClick", wpId);
  175. },
  176. clickFj(wpId){
  177. this.$emit("mapClick", wpId);
  178. }
  179. },
  180. watch:{
  181. wpId(res){
  182. this.fcId = res;
  183. },
  184. day(res){
  185. this.safeDay = res;
  186. },
  187. data(res){
  188. this.sourceMap = res;
  189. }
  190. }
  191. };
  192. </script>
  193. <style lang="less" scoped>
  194. .map {
  195. position: relative;
  196. width: 100%;
  197. height: 100%;
  198. .back {
  199. position: fixed;
  200. z-index: -1;
  201. width: 100vw;
  202. height: 100vh;
  203. top: 0;
  204. left: 0;
  205. background: url(../../../assets/background-home.png) no-repeat;
  206. background-size: 100% 100%;
  207. }
  208. .security-days {
  209. margin: 1.852vh;
  210. .text {
  211. font-size: 2.222vh;
  212. color: @write;
  213. }
  214. .num {
  215. color: @green;
  216. font-size: 3.704vh;
  217. .unit {
  218. font-size: 2.222vh;
  219. position: relative;
  220. margin-left: 0.556vh;
  221. top: -0.185vh;
  222. }
  223. }
  224. }
  225. .tab-box {
  226. margin: 1.852vh 2.778vh;
  227. .tab-item {
  228. display: flex;
  229. align-items: center;
  230. justify-content: center;
  231. font-size: @fontsize-l;
  232. cursor: pointer;
  233. width: 6.481vh;
  234. padding: 0.741vh 0;
  235. &.active {
  236. color: @green;
  237. position: relative;
  238. background-image: @greenLinearTop;
  239. &::after {
  240. content: "";
  241. position: absolute;
  242. width: 100%;
  243. height: 0.463vh;
  244. border: 0.093vh solid @green;
  245. border-top: 0;
  246. left: 0;
  247. bottom: 0;
  248. box-sizing: border-box;
  249. }
  250. }
  251. .svg-icon {
  252. margin-right: 0.556vh;
  253. }
  254. }
  255. }
  256. .return {
  257. position: absolute;
  258. display: flex;
  259. align-items: center;
  260. top: 0;
  261. right: 16px;
  262. font-size: @fontsize-l;
  263. color: fade(@white, 80);
  264. cursor: pointer;
  265. .svg-icon {
  266. margin-right: 0.7407vh;
  267. svg {
  268. transform: rotate(90deg);
  269. }
  270. }
  271. }
  272. .compass {
  273. position: absolute;
  274. right: 16px;
  275. bottom: 32px;
  276. border-radius: 50%;
  277. &::after {
  278. content: "";
  279. position: absolute;
  280. top: 4px;
  281. left: 4px;
  282. border-radius: 50%;
  283. width: 36px;
  284. height: 36px;
  285. box-shadow: inset 0px -5px 10px 0px @green;
  286. }
  287. svg {
  288. height: 45px;
  289. width: 45px;
  290. }
  291. }
  292. .map-img {
  293. width: calc(100% - 14.815vh);
  294. height: calc(100% - 14.815vh);
  295. margin: 7.407vh;
  296. position: absolute;
  297. z-index: 1;
  298. top: 0;
  299. left: 0;
  300. @keyframes rotate {
  301. from {
  302. transform: rotateX(70deg);
  303. }
  304. to {
  305. transform: rotateX(0deg);
  306. }
  307. }
  308. img {
  309. width: 100%;
  310. animation: rotate 3s;
  311. animation-direction: alternate;
  312. animation-iteration-count: infinite;
  313. }
  314. }
  315. }
  316. </style>