index.vue 18.1 KB
Newer Older
纪泽龙's avatar
纪泽龙 committed
1 2
<!--
 * @Author: your name
纪泽龙's avatar
纪泽龙 committed
3
 * @Date: 2022-01-11 13:44:17
4
 * @LastEditTime: 2022-03-10 09:12:48
纪泽龙's avatar
纪泽龙 committed
5 6
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
纪泽龙's avatar
纪泽龙 committed
7
 * @FilePath: /test/hello-world/src/views/Home.vue
纪泽龙's avatar
纪泽龙 committed
8 9
-->
<template>
纪泽龙's avatar
纪泽龙 committed
10
  <div class="home bigwindow">
纪泽龙's avatar
纪泽龙 committed
11
    <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
纪泽龙's avatar
纪泽龙 committed
12
    <div id="map"></div>
纪泽龙's avatar
纪泽龙 committed
13
    <!-- <Center :show="show" :centerData="centerData" /> -->
纪泽龙's avatar
纪泽龙 committed
14 15
    <UserCenter
      :title="centerTitle"
16
      :show="userCenterShow"
纪泽龙's avatar
纪泽龙 committed
17 18 19 20 21 22
      ref="userCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
23 24 25 26 27 28 29 30 31
    <OtherCenter
      :title="centerTitle"
      :show="otherCenterShow"
      ref="otherCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
yaqizhang's avatar
yaqizhang committed
32
    <PipeColor />
yaqizhang's avatar
yaqizhang committed
33
    <!-- 底部按钮 -->
纪泽龙's avatar
纪泽龙 committed
34
    <div class="home-div">
35
      <img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
纪泽龙's avatar
纪泽龙 committed
36 37 38
      <div class="listingsSty fangy">
        <div
          @click="allCompany"
39
          :class="selarr.length == companyLength ? 'active' : ''"
纪泽龙's avatar
纪泽龙 committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
          class="firsty"
        >
          全部
        </div>
        <div
          class="firsty"
          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
          v-for="(item, index) in typeList"
          :key="item.val"
          @click="sel(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
yaqizhang's avatar
yaqizhang committed
55 56

    <!-- 设备按钮 -->
纪泽龙's avatar
纪泽龙 committed
57 58 59 60 61 62 63 64 65 66 67 68 69
    <div class="typelist-div">
      <div
        class="list"
        v-for="(item, index) in arr"
        :key="index"
        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
        @click="sel1(index, item)"
      >
        <img
          :src="item.imgurl"
          style="margin-top: 2px; float: left; margin-right: 3px"
        />
        {{ item.name }}
yaqizhang's avatar
yaqizhang committed
70
      </div>
纪泽龙's avatar
纪泽龙 committed
71
    </div>
yaqizhang's avatar
yaqizhang committed
72

纪泽龙's avatar
纪泽龙 committed
73 74 75 76 77 78 79 80 81 82 83
    <!-- 弹框 -->
    <div
      id=""
      style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
    >
      <!-- <markerInfoWindow></markerInfoWindow> -->
    </div>

    <!-- 头部 -->
    <div class="banner-test">
      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
yaqizhang's avatar
yaqizhang committed
84
      <img src="@/assets/mapinages/tb.png" alt="" />
纪泽龙's avatar
纪泽龙 committed
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
    </div>

    <!-- 左边 -->
    <div class="leftbar">
      <leftBar ref="mychild2"></leftBar>
    </div>
    <!-- 右边 -->
    <div class="rightbar">
      <rightBar ref="mychild"></rightBar>
    </div>

    <!-- 左上角天气 -->
    <div
      class="weather"
      style="
        position: fixed;
        top: 0;
yaqizhang's avatar
yaqizhang committed
102 103
        margin-top: 10px;
        margin-left: 15px;
纪泽龙's avatar
纪泽龙 committed
104 105 106 107 108 109 110 111
        left: 0;
        z-index: 999;
        height: 50px;
      "
    >
      <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
      <iframe
        scrolling="no"
yaqizhang's avatar
yaqizhang committed
112
        src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=339CC9"
纪泽龙's avatar
纪泽龙 committed
113
        frameborder="0"
yaqizhang's avatar
yaqizhang committed
114
        width="450"
yaqizhang's avatar
yaqizhang committed
115
        height="30"
纪泽龙's avatar
纪泽龙 committed
116 117 118 119 120 121 122 123 124 125 126 127
        allowtransparency="true"
      ></iframe>
      <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
    </div>

    <!-- 右上角时间 -->
    <div
      class="right-time"
      style="
        position: fixed;
        top: 0;
        margin-top: 10px;
yaqizhang's avatar
yaqizhang committed
128
        margin-right: 15px;
纪泽龙's avatar
纪泽龙 committed
129 130
        right: 0;
        z-index: 999;
yaqizhang's avatar
yaqizhang committed
131
        width: 200px;
纪泽龙's avatar
纪泽龙 committed
132
        height: 50px;
纪泽龙's avatar
纪泽龙 committed
133
        color: #339cc9;
纪泽龙's avatar
纪泽龙 committed
134 135
      "
    >
纪泽龙's avatar
纪泽龙 committed
136
      <div style="height: 20px; width: 100%; float: right; font-size: 14px">
yaqizhang's avatar
yaqizhang committed
137
        {{ nowDate }}&nbsp;{{ nowtime }}&nbsp;{{ nowweek }}
纪泽龙's avatar
纪泽龙 committed
138 139
      </div>
    </div>
纪泽龙's avatar
纪泽龙 committed
140 141 142 143
  </div>
</template>

<script>
纪泽龙's avatar
纪泽龙 committed
144 145
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
146
import { mapGetters, mapActions } from "vuex";
纪泽龙's avatar
纪泽龙 committed
147 148
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser";
纪泽龙's avatar
纪泽龙 committed
149 150 151 152 153 154 155
import {
  pipeData,
  tiaoyaxiang,
  famen,
  changzhan,
  jiankong,
  user,
156
  alarmtime,
纪泽龙's avatar
纪泽龙 committed
157
} from "@/utils/mapClass/config.js";
158 159 160 161 162 163 164
import {
  getPipe,
  getTyx,
  getFm,
  getCz,
  getVideo,
  getUser,
165
  getEnterprise,
纪泽龙's avatar
纪泽龙 committed
166
  userAlarm,
167
  getTcqDevice,
168
} from "@/api/bigWindow/getDevice";
纪泽龙's avatar
纪泽龙 committed
169 170
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
171 172
import Device from "@/components/bigWindow/Device.vue";
import Cz from "@/components/bigWindow/Cz.vue";
纪泽龙's avatar
纪泽龙 committed
173 174
import User from "@/components/bigWindow/User.vue";
import Center from "@/components/bigWindow/Center.vue";
纪泽龙's avatar
纪泽龙 committed
175
import UserCenter from "@/components/bigWindow/UserCenter.vue";
176
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
177
import Company from "@/components/bigWindow/Company.vue";
纪泽龙's avatar
纪泽龙 committed
178 179 180 181 182
import PipeColor from "@/components/bigWindow/PipeColor.vue";

// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
纪泽龙's avatar
纪泽龙 committed
183
export default {
纪泽龙's avatar
纪泽龙 committed
184 185 186 187
  name: "Home",
  components: {
    leftBar,
    rightBar,
188
    // Center,
纪泽龙's avatar
纪泽龙 committed
189
    UserCenter,
190
    OtherCenter,
纪泽龙's avatar
纪泽龙 committed
191 192 193 194 195 196
    PipeColor,
  },
  data() {
    return {
      map: null,
      show: false,
纪泽龙's avatar
纪泽龙 committed
197
      // centerData: null,
纪泽龙's avatar
纪泽龙 committed
198 199 200 201 202 203 204 205 206 207 208
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期

      typeList: [
        {
          val: 1,
yaqizhang's avatar
yaqizhang committed
209
          name: "中燃翔科",
纪泽龙's avatar
纪泽龙 committed
210 211 212 213 214 215 216 217 218 219
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
纪泽龙's avatar
纪泽龙 committed
220 221 222 223 224 225
      //      2:"调压箱",
      // 3:"阀门",
      // 4:"厂站",
      // 5:"监控",
      // 6:"用户",
      arr: [
yaqizhang's avatar
yaqizhang committed
226
        {
纪泽龙's avatar
纪泽龙 committed
227 228 229 230
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/image/tyxsub.svg"),
          name: "调压箱",
yaqizhang's avatar
yaqizhang committed
231 232
        },
        {
纪泽龙's avatar
纪泽龙 committed
233 234 235 236
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/image/fmjsub.svg"),
          name: "阀门井",
yaqizhang's avatar
yaqizhang committed
237 238
        },
        {
纪泽龙's avatar
纪泽龙 committed
239 240 241
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/image/czsub.svg"),
纪泽龙's avatar
纪泽龙 committed
242
          name: "场 站",
yaqizhang's avatar
yaqizhang committed
243 244
        },
        {
纪泽龙's avatar
纪泽龙 committed
245 246 247 248
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/image/usersub.svg"),
          name: "用 户",
yaqizhang's avatar
yaqizhang committed
249 250
        },
        {
纪泽龙's avatar
纪泽龙 committed
251 252 253 254 255
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/image/jksub.svg"),
          name: "监 控",
        },
yaqizhang's avatar
yaqizhang committed
256
      ],
纪泽龙's avatar
纪泽龙 committed
257 258 259 260 261
      selarr1: [],
      // 用户的center数据
      detcetorList: [],
      centerUserId: null,
      centerTotal: null,
262
      userCenterShow: false,
纪泽龙's avatar
纪泽龙 committed
263
      centerTitle: "",
纪泽龙's avatar
纪泽龙 committed
264

265 266
      // 其他设备的center数据
      // 除了这个值,用来显示隐藏,其他值与user共用
267
      otherCenterShow: false,
268

纪泽龙's avatar
纪泽龙 committed
269 270
      // 报警轮询timer
      alarmTimer: null,
纪泽龙's avatar
纪泽龙 committed
271 272
    };
  },
yaqizhang's avatar
yaqizhang committed
273

274 275 276 277 278 279
  computed: {
    ...mapGetters(["company", "systemSetting"]),
    companyLength() {
      return this.typeList.length;
    },
  },
纪泽龙's avatar
纪泽龙 committed
280 281
  watch: {
    selarr(newValue) {
282
      if (newValue.length == this.companyLength) {
纪泽龙's avatar
纪泽龙 committed
283 284
        // this.$refs.mychild.choice(0);
        // this.$refs.mychild2.choice(0);
纪泽龙's avatar
纪泽龙 committed
285 286 287
      }
    },
  },
288
  async mounted() {
289 290 291 292 293 294 295 296 297
    // console.log(99999999999999)
    //   getPipe().then(res=>{
    //   console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
    // }).catch(res=>{
    //   console.log(123)
    // })
    // return;

    const path = eval(this.systemSetting.map_center);
纪泽龙's avatar
纪泽龙 committed
298 299 300
    this.map = new EditorMap(
      "map",
      {
301
        center: path,
纪泽龙's avatar
纪泽龙 committed
302
        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
纪泽龙's avatar
纪泽龙 committed
303
        zoom: 14.5,
纪泽龙's avatar
纪泽龙 committed
304 305 306
      },
      this
    );
307 308 309
    // 这是测试,用本地数据
    if (this.systemSetting.prod_test === "test") {
      this.addPipeLine(pipeData, Line);
310 311 312
      this.addDevice(tiaoyaxiang, Device);
      this.addDevice(famen, Device);
      this.addDevice(changzhan, Cz);
313 314 315 316 317 318 319 320 321 322
      this.addDevice(user, User);
      this.addDevice(jiankong, VideoView);
    } else {
      // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的
      this.GetCompany();
      this.typeList = this.company.map((item) => ({
        val: item.conpanyId,
        name: item.companyName,
      }));
      this.selarr = this.company.map((item) => item.conpanyId);
纪泽龙's avatar
纪泽龙 committed
323 324
      this.selarr1 = this.arr.map((item) => item.val);
      this.arr.forEach((item) => (item.ischeck = true));
325

326
      // getPipe() getTyx() getFm() getCz() getVideo() getUser()
327
      await this.goMap(getEnterprise, this.addDevice, Company);
328
      this.goMap(getPipe, this.addPipeLine, Line);
329 330 331
      this.goMap(getTyx, this.addDevice, Device);
      this.goMap(getFm, this.addDevice, Device);
      this.goMap(getCz, this.addDevice, Cz);
332
      this.goMap(getVideo, this.addDevice, VideoView);
333

纪泽龙's avatar
纪泽龙 committed
334 335 336 337 338 339 340
      // 用户要等一下 因为有报警数据
      this.goMap(detectorUserList, this.addDevice, User).then((res) => {
        // 先查一下,然后开启定时器
        this.userAlarm();
        this.alarmTimer = setInterval(() => {
          this.userAlarm();
          // console.log("查询报警");
341
        }, alarmtime);
纪泽龙's avatar
纪泽龙 committed
342
      });
343
    }
纪泽龙's avatar
纪泽龙 committed
344
    this.currentTime();
345
    this.$refs.mychild.choice(this.selarr);
346
    this.$refs.mychild2.choice(this.selarr);
纪泽龙's avatar
纪泽龙 committed
347 348
  },
  methods: {
349 350 351 352 353 354 355 356
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    // 管道上图
    addPipeLine(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addPipeLine(pipe, component);
纪泽龙's avatar
纪泽龙 committed
357 358 359 360 361 362 363 364 365 366 367
        });
      }
    },
    // 设备上图
    addDevice(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component);
        });
      }
    },
368
    goMap(httpFunc, addFunc, component) {
纪泽龙's avatar
纪泽龙 committed
369
      return httpFunc().then((res) => {
370
        // 给用户加icontype
纪泽龙's avatar
纪泽龙 committed
371 372 373 374
        if (res.data && !res.data[0].iconType) {
          res.data.forEach((item) => {
            item.iconType = 6;
          });
纪泽龙's avatar
纪泽龙 committed
375
        }
376 377 378 379
        // 根据数据格式不同,赋值不同,如果是个数组,就用res,如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
380
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
纪泽龙's avatar
纪泽龙 committed
381 382
          if (res[0].iconType == 5) {
            res.forEach((item) => {
纪泽龙's avatar
纪泽龙 committed
383
              item.companyType = null;
纪泽龙's avatar
纪泽龙 committed
384
            });
纪泽龙's avatar
纪泽龙 committed
385
          }
386 387 388
        } else {
          config = { data: res.data };
        }
389
        console.log("reresresresresresresresresress", config);
390

391
        addFunc(config, component);
纪泽龙's avatar
纪泽龙 committed
392 393 394 395 396 397 398 399 400 401 402 403 404 405
        return config.iconType;
      });
    },
    userAlarm() {
      userAlarm().then((res) => {
        console.log("报警", res.data);
        if (res.data.length > 0) {
          // 报警
          res.data.forEach((item) => {
            this.map.deviceAlarm(item);
          });
          // 看看谁告消警
        }
        this.map.relieveAlarm(res.data);
406 407 408
      });
    },

纪泽龙's avatar
纪泽龙 committed
409
    myCenterShow(boolean) {
纪泽龙's avatar
纪泽龙 committed
410 411
      this.show = boolean;
    },
纪泽龙's avatar
纪泽龙 committed
412 413 414 415 416
    // centerDataFunc(centerData) {
    //   this.centerData = centerData;
    //   console.log(centerData);
    //   this.show = true;
    // },
纪泽龙's avatar
纪泽龙 committed
417 418

    allCompany() {
419
      if (this.selarr.length == this.companyLength) {
纪泽龙's avatar
纪泽龙 committed
420 421
        this.selarr = [];
      } else {
422
        this.selarr = this.company.map((item) => item.conpanyId);
纪泽龙's avatar
纪泽龙 committed
423 424
      }

425 426
      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
纪泽龙's avatar
纪泽龙 committed
427
      this.map.infowindowClose();
纪泽龙's avatar
纪泽龙 committed
428
      this.show = false;
429
      this.$refs.mychild2.choice(this.selarr);
430
      this.$refs.mychild.choice(this.selarr);
纪泽龙's avatar
纪泽龙 committed
431 432
    },
    sel(index, item) {
纪泽龙's avatar
纪泽龙 committed
433 434
      this.map.infowindowClose();
      this.show = false;
纪泽龙's avatar
纪泽龙 committed
435 436 437 438
      const ind = this.selarr.indexOf(item.val);
      if (ind >= 0) {
        this.selarr.splice(ind, 1);
        if (item.val == 3) {
纪泽龙's avatar
纪泽龙 committed
439 440
          // this.$refs.mychild.choice(1);
          // this.$refs.mychild2.choice(1);
纪泽龙's avatar
纪泽龙 committed
441
        } else {
纪泽龙's avatar
纪泽龙 committed
442 443
          // this.$refs.mychild.choice(item.val + 1);
          // this.$refs.mychild2.choice(item.val + 1);
纪泽龙's avatar
纪泽龙 committed
444 445 446
        }
      } else {
        this.selarr.push(item.val);
纪泽龙's avatar
纪泽龙 committed
447 448
        // this.$refs.mychild.choice(item.val);
        // this.$refs.mychild2.choice(item.val);
纪泽龙's avatar
纪泽龙 committed
449
      }
纪泽龙's avatar
纪泽龙 committed
450 451
      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
452
      this.$refs.mychild2.choice(this.selarr);
453
      this.$refs.mychild.choice(this.selarr);
纪泽龙's avatar
纪泽龙 committed
454
    },
yaqizhang's avatar
yaqizhang committed
455

纪泽龙's avatar
纪泽龙 committed
456 457 458 459 460 461
    sel1(index, item) {
      const ind = this.selarr1.indexOf(item.val);
      if (ind >= 0) {
        this.selarr1.splice(ind, 1);
      } else {
        this.selarr1.push(item.val);
yaqizhang's avatar
yaqizhang committed
462
      }
纪泽龙's avatar
纪泽龙 committed
463
      this.map.allfilter(this.selarr, this.selarr1);
yaqizhang's avatar
yaqizhang committed
464
    },
纪泽龙's avatar
纪泽龙 committed
465
    //用户的设备center
466
    getDetectorInfoList(httpFunc, queryParams, title) {
纪泽龙's avatar
纪泽龙 committed
467
      console.log(queryParams);
468 469
      return httpFunc(queryParams).then((res) => {
        // console.log("queryParams", res);
纪泽龙's avatar
纪泽龙 committed
470 471 472 473 474 475
        if (res.code == 200) {
          this.detcetorList = res.rows;
          this.centerUserId = queryParams.userId;
          // 总数据
          this.centerTotal = res.total;
          // this.$refs.userCenter.fade = "fade";
476
          this.otherCenterShow = false;
477
          this.userCenterShow = true;
纪泽龙's avatar
纪泽龙 committed
478 479 480 481 482 483
          this.centerTitle = title;
          // 传递回去
          return res.code;
        }
      });
    },
484 485 486 487 488
    // 调压箱,阀门,场站睇下的设备
    getTcqDevice(queryParams, title) {
      console.log(queryParams);
      return getTcqDevice(queryParams).then((res) => {
        // console.log("queryParams", res);
489
        console.log("resresresresreszzzzzzzzzzzzzzz", res);
490

491 492 493 494 495 496
        this.detcetorList = res;
        this.centerUserId = queryParams.devId;
        // 总数据
        this.centerTotal = res.length;
        // this.$refs.userCenter.fade = "fade";
        this.userCenterShow = false;
497

498 499 500 501
        this.otherCenterShow = true;
        this.centerTitle = title;
        // 传递回去
        return res.code;
502 503
      });
    },
纪泽龙's avatar
纪泽龙 committed
504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531
    currentTime() {
      setInterval(() => {
        this.formatDate();
      }, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零
      this.nowtime = `${hour}:${minute}:${second}`;
      this.nowweek = `${weekArr[week]}`;
yaqizhang's avatar
yaqizhang committed
532
      this.nowDate = `${year}${month}${day}`;
纪泽龙's avatar
纪泽龙 committed
533 534 535 536 537 538
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器
纪泽龙's avatar
纪泽龙 committed
539
    }
540
    // 报警
纪泽龙's avatar
纪泽龙 committed
541 542 543
    if (this.alarmTimer) {
      clearInterval(this.alarmTimer);
    }
纪泽龙's avatar
纪泽龙 committed
544 545
  },
};
纪泽龙's avatar
纪泽龙 committed
546 547
</script>
<style lang="scss" scoped>
纪泽龙's avatar
纪泽龙 committed
548 549 550 551
.home {
  position: relative;
  height: 100vh;
}
纪泽龙's avatar
纪泽龙 committed
552 553 554
.goSystem {
  position: fixed;
  z-index: 9999;
yaqizhang's avatar
yaqizhang committed
555 556 557
  top: 50px;
  right: 20px;
  font-size: 14px;
纪泽龙's avatar
纪泽龙 committed
558 559
  color: #18baff;
  cursor: pointer;
yaqizhang's avatar
yaqizhang committed
560
  padding: 3px 5px;
纪泽龙's avatar
纪泽龙 committed
561 562
  border: 1px solid #339cc9;
  color: #339cc9;
纪泽龙's avatar
纪泽龙 committed
563
  &:hover {
纪泽龙's avatar
纪泽龙 committed
564 565
    background-color: #053b6a;
    color: #2cd5db;
纪泽龙's avatar
纪泽龙 committed
566 567
  }
}
纪泽龙's avatar
纪泽龙 committed
568 569 570 571 572
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
纪泽龙's avatar
纪泽龙 committed
573
}
纪泽龙's avatar
纪泽龙 committed
574 575
.banner-test {
  width: 100%;
yaqizhang's avatar
yaqizhang committed
576
  height: 85px;
纪泽龙's avatar
纪泽龙 committed
577 578 579 580 581 582 583 584 585 586 587
  position: relative;
  top: 0;
  z-index: 999;
}
.banner-test img {
  width: 100%;
  height: 100%;
}

.leftbar {
  width: 450px;
yaqizhang's avatar
yaqizhang committed
588
  height: 90%;
纪泽龙's avatar
纪泽龙 committed
589
  position: fixed;
yaqizhang's avatar
yaqizhang committed
590
  top: 10%;
纪泽龙's avatar
纪泽龙 committed
591
  left: 0;
yaqizhang's avatar
yaqizhang committed
592
  background: #112238;
纪泽龙's avatar
纪泽龙 committed
593 594
}
.rightbar {
yaqizhang's avatar
yaqizhang committed
595
  width: 470px;
yaqizhang's avatar
yaqizhang committed
596
  height: 90%;
纪泽龙's avatar
纪泽龙 committed
597
  position: fixed;
yaqizhang's avatar
yaqizhang committed
598
  top: 10%;
纪泽龙's avatar
纪泽龙 committed
599
  right: 0;
yaqizhang's avatar
yaqizhang committed
600
  background: #112238;
纪泽龙's avatar
纪泽龙 committed
601 602
}
.home-div {
yaqizhang's avatar
yaqizhang committed
603
  width: 50%;
纪泽龙's avatar
纪泽龙 committed
604 605 606
  height: 70px;
  position: fixed;
  bottom: 0;
yaqizhang's avatar
yaqizhang committed
607
  margin-left: 25%;
608 609 610 611 612 613 614
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
纪泽龙's avatar
纪泽龙 committed
615 616 617
}
.listingsSty {
  /* height: 25px; */
618
  // position: fixed;
纪泽龙's avatar
纪泽龙 committed
619
  /* border: 1px solid #fff; */
620 621 622 623 624 625
  margin-left: 25%;
  width: 50%;
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // font-family: 'arialbd';
纪泽龙's avatar
纪泽龙 committed
626 627
}
.firsty {
628 629
  // width: 15%;
  min-width: 80px;
纪泽龙's avatar
纪泽龙 committed
630 631 632 633 634
  height: 35px;
  text-align: center;
  line-height: 35px;
  /* border: 1px solid #fff; */
  color: #fff;
yaqizhang's avatar
yaqizhang committed
635
  font-size: 16px;
636 637
  // float: left;
  // margin-left: 8%;
纪泽龙's avatar
纪泽龙 committed
638
  cursor: pointer;
yaqizhang's avatar
yaqizhang committed
639
  // font-family: 'arialbd';
纪泽龙's avatar
纪泽龙 committed
640 641
}
.active {
yaqizhang's avatar
yaqizhang committed
642 643 644 645 646
  color: #2ee7e7;
  background: url(../../assets/mapinages/background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 18px;
纪泽龙's avatar
纪泽龙 committed
647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681

  /*position:relative;*/
  /*&::after{
    width: 80px;
    height: 50px;
    z-index: -1;
    content: " ";
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left:-40px;
    background: url(/img/bac1.0ec28f27.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: aquamarine;
  }*/
}
.weather-icon {
  float: left;
  width: 30px !important;
  height: 30px !important;
  margin-top: 10px !important;
  margin-left: 10px !important;
  padding-right: 5px;
}
.tttt {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(134, 185, 233),
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
纪泽龙's avatar
纪泽龙 committed
682
.typelist-div {
yaqizhang's avatar
yaqizhang committed
683 684 685 686
  width: 450px;
  height: 50px;
  z-index: 9999;
  position: fixed;
yaqizhang's avatar
yaqizhang committed
687 688 689
  top: 0;
  margin-top: 120px;
  right: 450px;
yaqizhang's avatar
yaqizhang committed
690
}
纪泽龙's avatar
纪泽龙 committed
691
.list {
yaqizhang's avatar
yaqizhang committed
692 693
  z-index: 9999;
  float: left;
yaqizhang's avatar
yaqizhang committed
694
  margin-left: 15px;
yaqizhang's avatar
yaqizhang committed
695
  color: #fff;
yaqizhang's avatar
yaqizhang committed
696
  line-height: auto;
yaqizhang's avatar
yaqizhang committed
697 698
  text-align: center;
  background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
纪泽龙's avatar
纪泽龙 committed
699
  box-shadow: inset 0px 1px 2px 1px #125c9b;
yaqizhang's avatar
yaqizhang committed
700 701
  font-size: 14px;
  padding: 5px 7px;
纪泽龙's avatar
纪泽龙 committed
702
  cursor: pointer;
yaqizhang's avatar
yaqizhang committed
703
}
纪泽龙's avatar
纪泽龙 committed
704 705 706 707

.list.active {
  background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
  box-shadow: inset 0px 1px 2px 1px #125c9b;
yaqizhang's avatar
yaqizhang committed
708
  color: #2ee7e7;
yaqizhang's avatar
yaqizhang committed
709
  font-size: 14px;
yaqizhang's avatar
yaqizhang committed
710
}
yaqizhang's avatar
yaqizhang committed
711
</style>