index.vue

<!--
 * @Author: your name
 * @Date: 2022-01-11 13:44:17
 * @LastEditTime: 2022-03-10 09:12:48
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
  <div class="home bigwindow">
    <!--<div class="goSystem" @click="$router.push('/index')">进入管理系统</div>-->
    <div id="map"></div>
    <!-- <Center :show="show" :centerData="centerData" /> -->
    <UserCenter
      :title="centerTitle"
      :show="userCenterShow"
      ref="userCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
    <OtherCenter
      :title="centerTitle"
      :show="otherCenterShow"
      ref="otherCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
    <PipeColor />
    <!-- 底部按钮 -->
    <!--<div class="home-div">-->
      <!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />-->
      <!--<div class="listingsSty fangy">-->
        <!--<div-->
          <!--@click="allCompany"-->
          <!--:class="selarr.length == companyLength ? 'active' : ''"-->
          <!--class="firsty"-->
        <!--&gt;-->
          <!--全部-->
        <!--</div>-->
        <!--<div-->
          <!--class="firsty"-->
          <!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"-->
          <!--v-for="(item, index) in typeList"-->
          <!--:key="item.val"-->
          <!--@click="sel(index, item)"-->
        <!--&gt;-->
          <!--{{ item.name }}-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <div class="event_div" @click="handleAdd">
        事件接报
    </div>
    <!--<div class="mouseToolBtn">-->
      <!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>-->
    <!--</div>-->
    <!--<div class="delTu" id="delTu">-->
      <!--&lt;!&ndash;<input name="in" type="radio" @click="delRadioLays()"/>&ndash;&gt;-->
    <!--</div>-->
    <!--<div class="toolBtn" :style="display">-->
      <!--<div class="el-form-div" style="height: 30px;background: black">-->
        <!--<div class="detail-title">标绘工具</div>-->
        <!--<div style="cursor: pointer;" >-->
          <!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="el-form-div">-->
          <!--<div style="width: 50%">-->
            <!--<div class="tool-div" @click="drawMark()">标记</div>-->
            <!--<div class="tool-div" @click="drawCircle()">圆形 </div>-->
            <!--<div class="tool-div" @click="drawRule()">测距</div>-->
            <!--<div class="tool-div" @click="editDraw()">编辑图形</div>-->
            <!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>-->
            <!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>-->
          <!--</div>-->
          <!--<div style="width: 50%">-->
            <!--<div class="tool-div" @click="drawPolyline()">线段</div>-->
            <!--<div class="tool-div" @click="drawPolygon()">多边形</div>-->
            <!--<div class="tool-div" @click="drawMeasureArea()">面积</div>-->
            <!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>-->
            <!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>-->
            <!--<div class="tool-div">保存图片</div>-->
          <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!-- 设备按钮 -->
    <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 }}
      </div>
    </div>
    <div class="typelist-div2">
      <div
        class="list"
        style="width: 146px;height: 35px;line-height: 35px;"
        v-for="(item, index) in arr2"
        :key="index"
        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
        @click="sel1(index, item)"
      >
        <img
          :src="item.imgurl"
          style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
        />
        {{ item.name }}
      </div>
    </div>


    <!--&lt;!&ndash; 左边 &ndash;&gt;-->
    <!--<div class="leftbar">-->
      <!--<leftBar ref="mychild2"></leftBar>-->
    <!--</div>-->
    <!-- 右边 -->
    <div class="rightbar">
      <rightBar ref="mychild"></rightBar>
    </div>
    <!-- 添加或修改事件接报对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <div class="el-form-div">
          <div style="width: 50%">
            <el-form-item label="事件名称" prop="eventName">
              <el-input v-model="form.eventName" :disabled="readonly" placeholder="请输入事件名称" />
            </el-form-item>
            <el-form-item label="事件类型" prop="eventType">
              <el-select v-model="form.eventType" placeholder="请选择事件类型" style="width: 100%" :disabled="readonly">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事件等级">
              <el-radio-group v-model="form.eventGrade">
                <el-radio
                  :disabled="readonly"
                  v-for="dict in eventGradeOptions"
                  :key="dict.dictValue"
                  :label="parseInt(dict.dictValue)"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="报案人" prop="informant" >
              <el-input v-model="form.informant" placeholder="请输入报案人" :disabled="readonly"/>
            </el-form-item>
            <el-form-item label="案发时间" prop="inforTime" >
              <el-date-picker clearable size="small"
                              :disabled="readonly"
                              v-model="form.inforTime"
                              type="datetime"
                              style="width: 100%"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择报案时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="报案人电话" prop="informantPhone">
              <el-input v-model="form.informantPhone" placeholder="请输入报案人电话" :disabled="readonly"/>
            </el-form-item>
          </div>
        </div>


        <el-form-item label="事发地点" prop="address">
          <el-input v-model="form.address" placeholder="请输入事发地点" :disabled="readonly"/>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <div class="el-form-div">
            <el-input v-model="form.longitude" placeholder="请输入经度" style="width: 120px" :disabled="readonly"/>
            <el-input v-model="form.latitude" placeholder="请输入纬度" style="width: 120px;margin-left: 10px;" :disabled="readonly"/>
            <el-button type="primary" style="margin-left: 10px;" plain @click="MapdialogFun">选择经纬度</el-button>
          </div>

        </el-form-item>

        <el-form-item label="事件描述" prop="describe">
          <el-input v-model="form.describe" type="textarea" placeholder="请输入事件描述" :disabled="readonly"/>
        </el-form-item>
        <el-form-item label="所属企业" prop="enterpriseId">
            <el-select v-model="form.enterpriseName" placeholder="请选择预案等级"  @change="qiyechang" >
              <el-option
                v-for = "dict in enterpriseList"
                :key = "dict.enterpriseId"
                :label = "dict.enterpriseName"
                :value = "dict.enterpriseId"
              />
            </el-select>
        <!--<el-input v-model="form.beyondEnterpriseId" placeholder="请输入所属企业" />-->
        </el-form-item>
        <!--<el-form-item label="指派公司id" prop="enterpriseId">-->
          <!--<el-input v-model="form.enterpriseId" placeholder="请输入指派公司id" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="指派公司名称" prop="enterpriseName">-->
          <!--<el-input v-model="form.enterpriseName" placeholder="请输入指派公司名称" />-->
        <!--</el-form-item>-->
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <GetPos
      :dialogVisible.sync="dialogTableVisible"
      device=""
      :devicePos="devicePos"
      @close="dialogcancelFun"
      @getPath="getPath"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/yjmap";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser";
import { listReceive, getReceive, delReceive, addReceive, updateReceive } from "@/api/system/receive";

import {
  pipeData,
  tiaoyaxiang,
  famen,
  changzhan,
  jiankong,
  user,
  alarmtime,
} from "@/utils/mapClass/config.js";
import {
  getPipe,
  getTyx,
  getFm,
  getCz,
  getVideo,
  getUser,
  getEnterprise,
  userAlarm,
  getTcqDevice,
} from "@/api/bigWindow/getDevice";
import { listDevice } from "@/api/system/device";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
import Device from "@/components/bigWindow/Device.vue";
import Cz from "@/components/bigWindow/Cz.vue";
import User from "@/components/bigWindow/User.vue";
import UserCenter from "@/components/bigWindow/UserCenter.vue";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
import Company from "@/components/bigWindow/Company.vue";
import PipeColor from "@/components/emergency/PipeColor.vue";
import GetPos from '@/components/GetPos';
import rightBar from "@/components/emergency/rightBar.vue";
import deviceMaterial from "@/components/emergency/deviceMaterial.vue";
export default {
  name: "Home",
  components: {
    GetPos,
    rightBar,
    // Center,
    UserCenter,
    OtherCenter,
    PipeColor,
    deviceMaterial,

  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 事件类型 1水灾 2火灾 3突发字典
      eventTypeOptions: [],
      // 事件等级 1级 2级 3级字典
      eventGradeOptions: [],
      // 弹出层标题
      title: "",
      //选择经纬度
      dialogTableVisible:false,
      devicePos:[],
      deviceList:[],
      enterpriseList:[],
      map: null,
      show: false,
      readonly:true,
      // centerData: null,
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期

      typeList: [
        {
          val: 1,
          name: "中燃翔科",
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
      display:"display:none",
      //      2:"调压箱",
      // 3:"阀门",
      // 4:"厂站",
      // 5:"监控",
      // 6:"用户",
      arr: [
        {
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/image/tyxsub.svg"),
          name: "调压箱",
        },
        {
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/image/fmjsub.svg"),
          name: "阀门井",
        },
        {
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/image/czsub.svg"),
          name: "场 站",
        },
        {
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/image/usersub.svg"),
          name: "用 户",
        },
        {
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/image/jksub.svg"),
          name: "监 控",
        },
      ],
      arr2: [
        {
          val: 10,
          ischeck: false,
          imgurl: require("@/assets/image/yj-jydw.png"),
          name: "救援队伍",
        },
        {
          val: 11,
          ischeck: false,
          imgurl: require("@/assets/image/yj-wz.png"),
          name: "救援物资",
        },
        {
          val: 12,
          ischeck: false,
          imgurl: require("@/assets/image/yj-cl.png"),
          name: "救援车辆",
        },
        {
          val: 13,
          ischeck: false,
          imgurl: require("@/assets/image/yj-yy.png"),
          name: "医 院",
        },
        {
          val: 15,
          ischeck: false,
          imgurl: require("@/assets/image/yj-xf.png"),
          name: "消防队伍",
        },
        {
          val: 16,
          ischeck: false,
          imgurl: require("@/assets/image/yj-xj.png"),
          name: "巡检人员",
        },
      ],
      selarr1: [],
      // 用户的center数据
      detcetorList: [],
      centerUserId: null,
      centerTotal: null,
      userCenterShow: false,
      centerTitle: "",

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

      // 报警轮询timer
      alarmTimer: null,
      //绘制工具
      markNum:0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        eventName: [
          { required: true, message: "请输入事件名称", trigger: "blur" }
        ],
        eventType: [
          { required: true, message: "请选择事件类型", trigger: "blur" }
        ],
        informant: [
          { required: true, message: "请输入报案人", trigger: "blur" }
        ],
        inforTime: [
          { required: true, message: "请输入案发时间", trigger: "blur" }
        ],
        informantPhone: [
          { required: true, message: "请输入报案人电话", trigger: "blur" }
        ],
        longitude: [
          { required: true, message: "请输入经纬度", trigger: "blur" }
        ],
      }
    };
  },

  computed: {
    ...mapGetters(["company", "systemSetting"]),
    companyLength() {
      return this.typeList.length;
    },
  },
  watch: {
    selarr(newValue) {
      if (newValue.length == this.companyLength) {
        // this.$refs.mychild2.choice(0);
      }
    },
  },
  created() {
    //this.getList();
    this.getDicts("event_type").then(response => {
      this.eventTypeOptions = response.data;
  });
    this.getDicts("event_grade").then(response => {
      this.eventGradeOptions = response.data;
  });
  },
  async mounted() {
    this.getList();
    // console.log(99999999999999)
    //   getPipe().then(res=>{
    //   console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
    // }).catch(res=>{
    //   console.log(123)
    // })
    // return;

    const path = eval(this.systemSetting.map_center);
    this.map = new EditorMap(
      "map",
      {
        center: path,
        //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
        zoom: 14.5,
      },
      this
    );
    // 这是测试，用本地数据
    if (this.systemSetting.prod_test === "test") {
      this.addPipeLine(pipeData, Line);
      this.addDevice(tiaoyaxiang, Device);
      this.addDevice(famen, Device);
      this.addDevice(changzhan, Cz);
      this.addDevice(user, User);
      this.addDevice(jiankong, VideoView);
    } else {
      // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的
      this.GetCompany();
      this.typeList = this.company.map((item) => ({
        val: item.conpanyId,
        name: item.companyName,
      }));
      var allarr = this.arr.concat(this.arr2);
      this.selarr = this.company.map((item) => item.conpanyId);
      this.selarr1 = allarr.map((item) => item.val);
      this.arr.forEach((item) => (item.ischeck = true));

      // getPipe() getTyx() getFm() getCz() getVideo() getUser()
      await this.goMap(getEnterprise, this.addDevice, Company);
      this.goMap(getPipe, this.addPipeLine, Line);
      this.goMap(getTyx, this.addDevice, Device);
      this.goMap(getFm, this.addDevice, Device);
      this.goMap(getCz, this.addDevice, Cz);
      this.goMap(getVideo, this.addDevice, VideoView);

      // 用户要等一下 因为有报警数据
      this.goMap(detectorUserList, this.addDevice, User).then((res) => {
        // 先查一下，然后开启定时器
        this.userAlarm();
        this.alarmTimer = setInterval(() => {
          this.userAlarm();
          // console.log("查询报警");
        }, alarmtime);
      });
    }
    this.currentTime();
    // this.$refs.mychild.choice(this.selarr);
    // this.$refs.mychild2.choice(this.selarr);
  },
  methods: {
    /** 查询应急设备列表 */
    getList() {
        var params = {
            "pageNum": 1,
            "pageSize": 1000
          };
        listDevice(params).then(response => {
          response.rows.forEach((item) => {
              item.iconType = item.deviceType+9;
          });
          this.deviceList = response.rows;
          //console.log(this.deviceList)
          this.addDevice({"data":this.deviceList},deviceMaterial)
           this.arr2.forEach((item) => (item.ischeck = true));
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.readonly=false;
      this.reset();
      this.open = true;
      this.title = "添加事件接报";
    },
    qiyechang(value){
      let obj = {};
      obj = this.enterpriseList.find((item)=>{
        return item.enterpriseId === value;
      ``});
      this.form.enterpriseName = obj.enterpriseName;
      this.form.enterpriseId = value;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.readonly=true;
      this.reset();
      const id = row.id || this.ids
      getReceive(id).then(response => {
        this.form = response.data;
      this.open = true;
      this.title = "修改事件接报";
    });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.status = 2;
            updateReceive(this.form).then(response => {
              this.msgSuccess("修改成功");
            this.open = false;
            this.$refs.mychild.choice(0);
          });
          } else {
            addReceive(this.form).then(response => {
              this.msgSuccess("新增成功");
            this.open = false;
            this.$refs.mychild.choice(0);
          });
          }
        }
      });
    },
    //选择经纬度
    MapdialogFun() {
      this.dialogTableVisible = true;
    },
    dialogcancelFun() {
      this.dialogTableVisible = false;
    },
    getPath(res){
      console.log("res", res);
      console.log(this.form.longitude, this.form.latitude);
      //确认选择经纬度
      this.form.longitude = res[0];
      this.form.latitude = res[1];
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        eventName: null,
        eventType: null,
        eventGrade: 0,
        address: null,
        longitude: null,
        latitude: null,
        informant: null,
        inforTime: null,
        informantPhone: null,
        describe: null,
        enterpriseId: null,
        enterpriseName: null,
        remarks: null,
        isDel: null,
        createTime: null
      };
      this.resetForm("form");
    },
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    // 管道上图
    addPipeLine(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addPipeLine(pipe, component);
        });
      }
    },
    // 设备上图
    addDevice(data, component) {
      //console.log(data,data)
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component);
        });
      }
    },
    goMap(httpFunc, addFunc, component) {
      return httpFunc().then((res) => {
        // 给用户加icontype
        if (res.data && !res.data[0].iconType) {
          res.data.forEach((item) => {
            item.iconType = 6;
          });
        }
        if(httpFunc==getEnterprise){
          //console.log("000000000",res.data)
          this.enterpriseList= res.data;
        }
        // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
          if (res[0].iconType == 5) {
            res.forEach((item) => {
              item.companyType = null;
            });
          }
        } else {
          config = { data: res.data };
        }
        //console.log("======", config);

        addFunc(config, component);
        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);
      });
    },

    myCenterShow(boolean) {
      this.show = boolean;
    },
    // centerDataFunc(centerData) {
    //   this.centerData = centerData;
    //   console.log(centerData);
    //   this.show = true;
    // },

    allCompany() {
      if (this.selarr.length == this.companyLength) {
        this.selarr = [];
      } else {
        this.selarr = this.company.map((item) => item.conpanyId);
      }

      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
      this.map.infowindowClose();
      this.show = false;
    },
    sel(index, item) {
      this.map.infowindowClose();
      this.show = false;
      const ind = this.selarr.indexOf(item.val);
      if (ind >= 0) {
        this.selarr.splice(ind, 1);
        if (item.val == 3) {
          // this.$refs.mychild.choice(1);
          // this.$refs.mychild2.choice(1);
        } else {
          // this.$refs.mychild.choice(item.val + 1);
          // this.$refs.mychild2.choice(item.val + 1);
        }
      } else {
        this.selarr.push(item.val);
        // this.$refs.mychild.choice(item.val);
        // this.$refs.mychild2.choice(item.val);
      }
      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
    },

    sel1(index, item) {
      const ind = this.selarr1.indexOf(item.val);
      if (ind >= 0) {
        this.selarr1.splice(ind, 1);
      } else {
        this.selarr1.push(item.val);
      }
      this.map.allfilter(this.selarr, this.selarr1);
    },
    //用户的设备center
    getDetectorInfoList(httpFunc, queryParams, title) {
      console.log(queryParams);
      return httpFunc(queryParams).then((res) => {
        // console.log("queryParams", res);
        if (res.code == 200) {
          this.detcetorList = res.rows;
          this.centerUserId = queryParams.userId;
          // 总数据
          this.centerTotal = res.total;
          // this.$refs.userCenter.fade = "fade";
          this.otherCenterShow = false;
          this.userCenterShow = true;
          this.centerTitle = title;
          // 传递回去
          return res.code;
        }
      });
    },
    // 调压箱，阀门，场站睇下的设备
    getTcqDevice(queryParams, title) {
      console.log(queryParams);
      return getTcqDevice(queryParams).then((res) => {
        // console.log("queryParams", res);
        console.log("resresresresreszzzzzzzzzzzzzzz", res);

        this.detcetorList = res;
        this.centerUserId = queryParams.devId;
        // 总数据
        this.centerTotal = res.length;
        // this.$refs.userCenter.fade = "fade";
        this.userCenterShow = false;

        this.otherCenterShow = true;
        this.centerTitle = title;
        // 传递回去
        return res.code;
      });
    },
    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]}`;
      this.nowDate = `${year}年${month}月${day}`;
    },
    // 地图绘制
    // drawMark() {
    //   this.map.mouseAddMarker();
    // },
    // drawPolyline() {
    //    this.map.mouseAddPipeline("Polyline");
    // },
    // drawCircle() {
    //   this.map.mouseAddCircle("Circle");
    // },
    // drawPolygon() {
    //   this.map.mouseAddPolygon("Polygon");
    // },
    // drawRule() {
    //   this.map.mouseAddRule();
    // },
    // drawMeasureArea() {
    //   this.map.mouseAddMeasureArea();
    // },
    // mouseToolDrawClear(){
    //   this.map.mousetoolClose(true);
    // },
    // editDraw(){
    //   this.map.editOverlays();
    // },
    // endEditDraw(){
    //   this.map.endEditOverlays();
    // },
    // delRadioLays(num){
    //   console.log("---"+num)
    // },
    // openDraw(){
    //   this.display="";
    // },
    // closeDraw(){
    //   this.display="display:none";
    // }
  },

};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  height: calc(100vh - 50px);
}
.goSystem {
  position: fixed;
  z-index: 9999;
  top: 50px;
  right: 20px;
  font-size: 14px;
  color: #18baff;
  cursor: pointer;
  padding: 3px 5px;
  border: 1px solid #339cc9;
  color: #339cc9;
  &:hover {
    background-color: #053b6a;
    color: #2cd5db;
  }
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.banner-test {
  width: 100%;
  height: 85px;
  position: relative;
  top: 0;
  z-index: 999;
}
.banner-test img {
  width: 100%;
  height: 100%;
}

.leftbar {
  width: 450px;
  height: 90%;
  position: fixed;
  top: 10%;
  left: 0;
  background: #112238;
}
.rightbar {
  width: 470px;
  height: 92%;
  position: fixed;
  top: 50px;
  right: 0;
  background: #ffffff;
}
.home-div {
  width: 50%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 20%;
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
}
.event_div{
  position: fixed;
  margin-left: 20%;
  z-index:999;
  width: 100px;
  height: 50px;
  color: white;
  background: #053b6a;
  line-height: 50px;
  bottom: 50px;
  text-align: center;
  cursor:pointer;
}
.listingsSty {
  /* height: 25px; */
  // position: fixed;
  /* border: 1px solid #fff; */
  margin-left: 25%;
  width: 50%;
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // font-family: 'arialbd';
}
.firsty {
  // width: 15%;
  min-width: 80px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  /* border: 1px solid #fff; */
  color: #fff;
  font-size: 16px;
  // float: left;
  // margin-left: 8%;
  cursor: pointer;
  // font-family: 'arialbd';
}
.active {
  color: #2ee7e7;
  background: url(../../assets/mapinages/background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 18px;

  /*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;
}
.typelist-div {
  width: 450px;
  height: 50px;
  z-index: 9999;
  position: fixed;
  top: 0;
  margin-top: 80px;
  right: 450px;
}
.typelist-div2{
  width: 150px;
  height: 50px;
  z-index: 9999;
  position: fixed;
  margin-top: 80px;
  margin-left: 10px;
}
.list {
  z-index: 9999;
  float: left;
  margin-left: 15px;
  color: #000000;
  line-height: auto;
  background: #ffffff;
  box-shadow: inset 0px 1px 2px 1px #ffffff;
  font-size: 14px;
  padding: 5px 7px;
  cursor: pointer;
}

.list.active {
  background: #ffffff;
  box-shadow: inset 0px 1px 2px 1px #ffffff;
  color: #1890ff;
  font-size: 14px;
}
.mouseToolBtn {
  position: fixed;
  margin-left: 100px;
  z-index: 999;
  bottom: 50px;
}
.delTu{
  position: fixed;
  margin-left: 30%;
  margin-top: 300px;
  z-index: 999;
  height: 150px;
  width: 450px;
  background: #1c84c6;
}
.serBtn {
  background: #fff;
  width: 50px;
  height: 50px;
  text-align: center;
  outline: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.toolBtn{
  background: white;
  width: 160px;
  position: fixed;
  margin-left: 100px;
  z-index: 999;
  bottom: 100px;
  height: 200px;
}
.el-form-div{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  justify-content:flex-start;
  width: 100%;
}
.detail-title{
  height: 30px;
  color: white;
  line-height: 30px;
  width: 130px;
  font-size: 15px;
  margin-left: 5px;
}
.tool-div{
  border: 1px solid #cccccc;
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 4px;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  cursor:pointer;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 13vh !important;
}
</style>