123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337 |
- <template>
- <div class="map">
- <div class="back"></div>
- <div class="security-days" v-if="fcId === '0'">
- <div class="text">安全天数:</div>
- <div class="num">
- <span class="font-num">{{safeDay}}</span>
- <span class="unit">天</span>
- </div>
- </div>
- <div class="tab-box">
- <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click.stop="selectTab(index, tab.show)">
- <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
- <SvgIcon :svgid="tab.icon"></SvgIcon>
- </span>
- <span>{{ tab.text }}</span>
- </div>
- </div>
- <div class="return" @click="backMap" v-show="mapName !== 'nx'">
- <span class="svg-icon svg-icon-sm">
- <svg-icon :svgid="'svg-arrow-dpwn-1'" />
- </span>
- 返回
- </div>
- <!-- 指南针 -->
- <div class="compass">
- <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">
- <g id="渐变">
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- fill="#000"
- opacity="0"
- d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
- 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"
- />
- </g>
- <g id="图层_2">
- <g>
- <g>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- fill="#606769"
- opacity="0.75"
- 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"
- />
- </g>
- </g>
- </g>
- <g id="图层_3">
- <g>
- <g>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- fill="#05BB4C"
- 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"
- />
- </g>
- </g>
- </g>
- <g id="图层_4">
- <g>
- <g>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- fill="#05BB4C"
- opacity="0.2"
- 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"
- />
- </g>
- </g>
- </g>
- <g id="图层_1">
- <polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663" />
- </g>
- <g id="图层_7">
- <polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745" />
- </g>
- </svg>
- </div>
- <div class="map-img">
- <!-- 宁夏地图总览 -->
- <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
- <!-- 麻黄山风电场 -->
- <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj"></MHSFDC>
- </div>
- </div>
- </template>
- <script>
- // 宁夏地图总览
- import SvgMapNX from "./map/svg-map-nx.vue";
- // 麻黄山风电场
- import MHSFDC from "./map/MHS_FDC.vue";
- import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
- import compassIcon from "@/assets/icon/svg_fill/compass.svg";
- export default {
- // 名称
- name: "Map",
- // 使用组件
- components: {
- SvgMapNX,
- MHSFDC,
- SvgIcon,
- },
- props:{
- wpId:{
- type:String,
- default:"0"
- },
- day:{
- type:String,
- default:"---"
- },
- data:{
- type:Object,
- default:() => {}
- }
- },
- mounted(){
- this.fcId = this.wpId;
- this.safeDay = this.day;
- this.sourceMap = this.data;
- },
- // 数据
- data() {
- return {
- fcId:"",
- safeDay:"",
- showType: "all",
- sourceMap:{},
- tabs: [
- {
- icon: "svg-all",
- text: "全部",
- show: "all"
- },
- {
- icon: "svg-wind-site",
- text: "风场",
- show: "fc"
- },
- {
- icon: "svg-photovoltaic",
- text: "电站",
- show: "gf"
- },
- ],
- compassIcon: compassIcon,
- activeTab: 0,
- img: require("@assets/map/map-nx.png"),
- nxSvgFile: require("@assets/map/map-nx.svg"),
- mapName: "nx",
- };
- },
- // 函数
- methods: {
- selectTab(index, showType) {
- this.activeTab = index;
- this.showType = showType;
- let wpId = (showType === "all" ? "0" : showType === "fc" ? "-1" : "-2");
- this.safeDay = "---";
- this.mapName = "nx";
- this.$emit("mapClick", wpId);
- },
- backMap() {
- // this.mapName = "nx";
- // this.$emit("mapClick", wpId);
- },
- clickLabel(wpId) {
- this.mapName = wpId;
- this.$emit("mapClick", wpId);
- },
- clickFj(wpId){
- this.$emit("mapClick", wpId);
- }
- },
- watch:{
- wpId(res){
- this.fcId = res;
- },
- day(res){
- this.safeDay = res;
- },
- data(res){
- this.sourceMap = res;
- }
- }
- };
- </script>
- <style lang="less" scoped>
- .map {
- position: relative;
- width: 100%;
- height: 100%;
- .back {
- position: fixed;
- z-index: -1;
- width: 100vw;
- height: 100vh;
- top: 0;
- left: 0;
- background: url(../../../assets/background-home.png) no-repeat;
- background-size: 100% 100%;
- }
- .security-days {
- margin: 1.852vh;
- .text {
- font-size: 2.222vh;
- color: @write;
- }
- .num {
- color: @green;
- font-size: 3.704vh;
- .unit {
- font-size: 2.222vh;
- position: relative;
- margin-left: 0.556vh;
- top: -0.185vh;
- }
- }
- }
- .tab-box {
- margin: 1.852vh 2.778vh;
- .tab-item {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: @fontsize-l;
- cursor: pointer;
- width: 6.481vh;
- padding: 0.741vh 0;
- &.active {
- color: @green;
- position: relative;
- background-image: @greenLinearTop;
- &::after {
- content: "";
- position: absolute;
- width: 100%;
- height: 0.463vh;
- border: 0.093vh solid @green;
- border-top: 0;
- left: 0;
- bottom: 0;
- box-sizing: border-box;
- }
- }
- .svg-icon {
- margin-right: 0.556vh;
- }
- }
- }
- .return {
- position: absolute;
- display: flex;
- align-items: center;
- top: 0;
- right: 16px;
- font-size: @fontsize-l;
- color: fade(@white, 80);
- cursor: pointer;
- .svg-icon {
- margin-right: 0.7407vh;
- svg {
- transform: rotate(90deg);
- }
- }
- }
- .compass {
- position: absolute;
- right: 16px;
- bottom: 32px;
- border-radius: 50%;
- &::after {
- content: "";
- position: absolute;
- top: 4px;
- left: 4px;
- border-radius: 50%;
- width: 36px;
- height: 36px;
- box-shadow: inset 0px -5px 10px 0px @green;
- }
- svg {
- height: 45px;
- width: 45px;
- }
- }
- .map-img {
- width: calc(100% - 14.815vh);
- height: calc(100% - 14.815vh);
- margin: 7.407vh;
- position: absolute;
- z-index: 1;
- top: 0;
- left: 0;
- @keyframes rotate {
- from {
- transform: rotateX(70deg);
- }
- to {
- transform: rotateX(0deg);
- }
- }
- img {
- width: 100%;
- animation: rotate 3s;
- animation-direction: alternate;
- animation-iteration-count: infinite;
- }
- }
- }
- </style>
|