<!--
 * @Author: ZR
 * @Date: 2023-11-06 09:43:52
 * @LastEditTime: 2024-10-09 10:29:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <div class="bigScrenn">
    <!-- 头部 -->
    <GdMap :isShow="true" />

    <Head></Head>
    <div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '442px' }"
      @click="showClassL = !showClassL"></div>
    <div class="asideBox transition" :style="{ left: showClassL ? '-446px' : '0px' }">
      <!-- 工作情况 -->
      <div class="boder-small back-color">
        <WorkCondition />
      </div>
      <!-- 街面巡组 -->
      <div class="boder-small">
        <StreetGroup />
      </div>
      <div class="boder-small">
        <Spxl />
        <!-- <div class="common-title flex">
          <div>视频巡逻</div>
          <div class="flex">
            <el-select v-model="spTwoValue" class="mr6" placeholder="Select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="spTwoValue" placeholder="Select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="comom-cnt">
          <VideoPatrols></VideoPatrols>
        </div> -->
      </div>
    </div>
    <div class="search_box">
      <el-input v-model="keywords" style="max-width: 600px" placeholder="请输入关键词">
        <template #append>
          <el-button @click="searchFn" type="primary" style="background-color: #409eff;border: none;color: #fff;">搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '442px' }"
      @click="showClassR = !showClassR"></div>
    <div class="asideBox transition" :style="{ right: showClassR ? '-446px' : '0px' }">
      <div class="lineOption">
        <div class="option" @click="openZdXl('ck')">
          <div>巡逻</div>
          <div>路线</div>
        </div>
        <div class="option" @click="openZdXl('zd')">
          <div>制定</div>
          <div>路线</div>
        </div>
      </div>
      <div class="boder-middle">
        <StreetCondition />
      </div>
      <div class="boder-small">
        <div class="common-title flex">
          无人机巡逻
          <el-select v-model="spTwoValue" placeholder="Select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="comom-cnt">
          <DronePatrols></DronePatrols>
        </div>
      </div>
    </div>
    <div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
      <CountModel />
    </div>
    <!-- 底部按钮 -->
    <BottomBtn />
    <!-- 指令时间按钮 -->
    <div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
      <el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisibleZdrw"
        :append-to-body="false">
        <template #reference>
          <div @click="clickAddZdrw" class="imgBox">
            <span>指导巡逻</span>
          </div>
        </template>
        <div class="depBox">
          关键字：
          <div style="margin-left: 14px; width: 80%">
            <el-input v-model="listQueryZd.keyWord" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="depBox">
          是否巡逻：
          <div style="width: 80%">
            <el-select v-model="listQueryZd.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
              }}</el-option>
            </el-select>
          </div>
        </div>
        <div class="depBox">
          所属部门：
          <MOSTY.Department clearable width="80%" v-model="listQueryZd.ssbmdm" />
        </div>
        <el-radio-group v-model="selectTime_Zd" @change="changeYcTime">
          <el-radio label="今日" />
          <el-radio label="昨日" />
          <el-radio label="本周" />
          <el-radio label="本月" />
          <el-radio label="近30日" />
          <el-radio label="本季度" />
          <el-radio label="近半年" />
          <el-radio label="近一年" />
          <el-radio label="自定义" />
        </el-radio-group>
        <div>
          <el-date-picker v-model="zdTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
            :readonly="zdTime == '自定义' ? false : true" />
        </div>
        <CheckBox :data="zldwList" @changeData="changeDataZldrw" />
        <div class="footerBtns">
          <el-button @click="handleZd">上图</el-button>
          <el-button @click="calcelZd('cancel')">取消</el-button>
        </div>
      </el-popover>

      <el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisible" :append-to-body="false">
        <template #reference>
          <div @click="clickAddEvent" class="imgBox">
            <span>重点巡逻</span>
          </div>
        </template>
        <div class="depBox">
          关键字：
          <div style="margin-left: 14px; width: 80%">
            <el-input v-model="listQuery.keyWord" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="depBox">
          是否巡逻：
          <div style="width: 80%">
            <el-select v-model="listQuery.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
              }}</el-option>
            </el-select>
          </div>
        </div>
        <div class="depBox">
          所属部门：
          <MOSTY.Department clearable width="80%" v-model="listQuery.ssbmdm" />
        </div>
        <el-radio-group v-model="selectTime_yc" @change="changeYcTime">
          <el-radio label="今日" />
          <el-radio label="昨日" />
          <el-radio label="本周" />
          <el-radio label="本月" />
          <el-radio label="近30日" />
          <el-radio label="本季度" />
          <el-radio label="近半年" />
          <el-radio label="近一年" />
          <el-radio label="自定义" />
        </el-radio-group>
        <div>
          <el-date-picker v-model="fzycTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
            :readonly="selectTime_yc == '自定义' ? false : true" />
        </div>
        <CheckBox :data="timeList" @changeData="changeDataBC" />
        <div class="footerBtns">
          <el-button @click="handleFzyc">上图</el-button>
          <el-button @click="calcelFzyc('cancel')">取消</el-button>
        </div>
      </el-popover>
      <el-popover :width="226" trigger="click" placement="left" v-model:visible="showVisibleWarning"
        :append-to-body="false">
        <template #reference>
          <div @click="showVisibleWarning = !showVisibleWarning" class="imgBox">
            <span>下发指令</span>
          </div>
        </template>
        <div class="footerBtns">
          <el-button @click="clickXfzl">公安资源</el-button>
          <el-button @click="clickQfqz">群防群治人员</el-button>
        </div>
      </el-popover>
    </div>
    <!-- 左边弹窗 -->
    <LeftDialog :isPosition="showClassL" />
    <!-- 中间边弹窗 -->
    <CenterDialog />
    <!-- 右边弹窗 -->
    <RightDialog :isPosition="showClassR" />
    <!-- 警组弹框弹框 -->
    <PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
    <!-- 下发指令 -->
    <XiafaZl />
    <!-- 群防群治 -->
    <QFQZ />
    <!-- 下发指令详情 -->
    <ZlxfList />
    <!-- 犯罪预测 -->
    <FzycDialog v-if="show.fzyc" :data="fzycInfo" />
    <!-- 选房区警情 -->
    <XfqJq />
    <!-- 意见收集 -->
    <YjsjDialog :isShow="show.yisj" v-if="show.yisj" @closeDialog="show.yisj = false" />
    // 指定路线
    <ZdlxDialog :isShow="show.zdlx" v-if="show.zdlx" @closeDialog="show.zdlx = false" />
  </div>
  <teleport to="#app" v-if="visibleDialog">
    <WarningCenter v-model="show.yjzx" v-if="show.yjzx" @closeDialog="visibleDialog = false" />
    <XssbInfo v-model="show.xssb" v-if="show.xssb" @closeDialog="visibleDialog = false" />
    <BbtsInfo v-model="show.bbts" v-if="show.bbts" @closeDialog="visibleDialog = false" />
    <PiliceCaseCount v-model="show.jqtj" v-if="show.jqtj" @closeDialog="visibleDialog = false" />
    <DwryCount v-model="show.dwryts" v-if="show.dwryts" @closeDialog="visibleDialog = false" />
  </teleport>
  <!-- @refresh="getList" -->
  <XfrwDialog ref="xfDiloag"></XfrwDialog>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { timeValidate } from "@/utils/tools.js";
import { qcckGet, qcckPost } from '@/api/qcckApi'
import { ElNotification } from "element-plus";
import WarningCenter from "./modelDialog/warningCenter.vue";
import YjsjDialog from "./modelDialog/yjsjDialog.vue";
import ZdlxDialog from "./modelDialog/zdlxDialog.vue";
import XssbInfo from "./modelDialog/xssbInfo.vue";
import BbtsInfo from "./modelDialog/bbtsInfo.vue";
import PiliceCaseCount from "./modelDialog/piliceCaseCount.vue";
import DwryCount from "./modelDialog/dwryCount.vue";
import { queryListfzyc, queryListZdrw, tbYsSxtList, getSelectVigilant } from "@/api/dpApi/home.js";
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import Head from "./layout/head.vue";
import CheckBox from "@/components/checkBox/index";
import XiafaZl from "./components/dialog/xiafaZl.vue";
import QFQZ from "./components/dialog/qfqz.vue";
import ZlxfList from "./components/dialog/zlxfList.vue";
import XfqJq from "./components/xfqJq/index.vue";
import WorkCondition from "./layout/workCondition.vue";
import Spxl from "./layout/spxl.vue";
import StreetGroup from "./layout/streetGroup.vue";
import StreetCondition from "./layout/streetCondition.vue";
import CountModel from "./layout/statisticsModel.vue";
import LeftDialog from "./components/leftDialog.vue";
import CenterDialog from "./components/centerDialog.vue";
import RightDialog from "./components/rightDialog.vue";
import BottomBtn from "./layout/bottomBtn.vue";
import PoliceGroupInfo from "./layout/streetInfo.vue";
import FzycDialog from "./layout/fzycDialog.vue";
// import { queryListZdrw } from '@/api/dpApi/home'
// import XfrwDialog from '@/views/backOfficeSystem/AlarmLinkage/PatrolLine/components/xfrwDialog.vue'
import {
  onMounted,
  ref,
  onUnmounted,
  watch,
  getCurrentInstance,
  reactive
} from "vue";
const visibleDialog = ref(false);
const keywords = ref("")
const show = reactive({
  yjzx: false,
  jqtj: false,
  bbts: false, //群访信息
  xssb: false, //线索上报
  dwryts: false, //单位人员统计
  yisj: false, //意见收集
  fzyc: false, //犯罪预测
  zdlx: false, //制定路线
  jzgroup: false //展示警组弹窗
});

const showVisibleZdrw = ref(false);
const showVisibleWarning = ref(false);
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_BZ_SD } = proxy.$dict("D_BZ_SF", "D_BZ_SD");
const showVisible = ref(false);
const selectTime_yc = ref("今日"); //犯罪预测时间类型
const selectTime_Zd = ref("今日"); //犯罪预测时间类型
const listQuery = ref({});
const listQueryZd = ref({});
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
const zdTime = ref([getRecentDay(0), getRecentDay(0)]);
const circleList = ref([]);
const showClassL = ref(false); //左列折叠
const showClassR = ref(false); //右列折叠
const jzxqList = ref({}); //警组列表详情
const fzycInfo = ref({}); //犯罪预测
const spvalue = ref("Option1");
const spTwoValue = ref("Option1");
const options = ref([
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
]);
const timeList = ref({
  list: [
    "09:00-13:00",
    "13:00-17:00",
    "17:00-21:00",
    "21:00-01:00",
    "01:00-09:00"
  ],
  hasChoose: []
});
const condition = ref()
const zldwList = reactive({
  list: [],
  hasChoose: []
});
const isShowCount = ref(false); //是否展示统计
watch(
  () => showClassR.value,
  (val) => {
    emitter.emit("followUp", !val);
  }
);
watch(
  () => D_BZ_SD,
  (val) => {
    zldwList.list = val.value.map((v) => {
      return v.label;
    });
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  window.openTk = openTk;
  getListData();
  // 融合通迅
  let idEntityCard = window.localStorage.getItem("idEntityCard");
  let sfrh = window.localStorage.getItem("SFRH");
  if (sfrh == 1 && idEntityCard) {
    try {
      SPPUC.init(
        idEntityCard,
        "",
        function () { },
        function (device_id, type, [lng, lat, speed]) { }
      );
    } catch { }
  }
  // 展示犯罪预测
  emitter.on("showFzycInfo", (res) => {
    show.fzyc = res.type ? true : false;
    fzycInfo.value = res.info;
  });

  // 展示警组
  emitter.on("showJzInfo", (res) => {
    show.jzgroup = res ? true : false;
    if (res) {
      res.txzb =
        typeof res.txzb == "string"
          ? JSON.parse(res.txzb)
          : res.txzb
            ? res.txzb
            : [];
      res.pbmj =
        typeof res.pbmj == "string"
          ? JSON.parse(res.pbmj)
          : res.pbmj
            ? res.pbmj
            : [];
      res.pbfj =
        typeof res.pbfj == "string"
          ? JSON.parse(res.pbfj)
          : res.pbfj
            ? res.pbfj
            : [];
      res.jyqx =
        typeof res.jyqx == "string"
          ? JSON.parse(res.jyqx)
          : res.jyqx
            ? res.jyqx
            : [];
      res.pbcl =
        typeof res.pbcl == "string"
          ? JSON.parse(res.pbcl)
          : res.pbcl
            ? res.pbcl
            : [];
      jzxqList.value = res;
      jzxqList.value.openJyqx = [];
      jzxqList.value.openTxzb = [];
    }
    if (!show.jzgroup) {
      emitter.emit("deleteText"); //清除巡防区文字
      emitter.emit("deletePointArea", "xfq"); //清除巡防区
    }
  });
  //获取条件
  emitter.on("conditions", (val) => {
    condition.value = val
  });
  emitter.on("showWarning", (val) => {
    visibleDialog.value = true;
    switch (val) {
      case "YJZX": //预警中心
        show.yjzx = true;
        break;
      case "JQTJ": //警情统计
        show.jqtj = true;
        break;
      case "QFXS": //群防线索
        show.xssb = true;
        break;
      case "BBTS": //报备提示
        show.bbts = true;
        break;
      case "DWRYTJ": //单位人员统计
        show.dwryts = true;
        break;
      case "YJSJ": //意见收集
        show.yisj = true;
        break;
    }
  });

  // 线索上报 推送播放
  emitter.on("socketXSSB", (val) => {
    val.tp = val.tp ? val.tp.split(",") : [];
    let html = `
    <div class="newCard">
      <div class="title two_text_detail">${val.nr}</div>
      <div class="text">
        上报人：<span class="info">${val.xm}（ ${val.lxdh} ）</span></span>
      </div>
      <div class="text">
        线索上报类型：<span class="info">${val.lxmc}</span></span>
      </div>
      <div class="text">图片：`;
    val.tp.forEach((it) => {
      html += `<img style="width:60px; height:60px; margin-left:2px;" src="/mosty-base/minio/image/download/${it}" />`;
    });
    html += ` </div></div>`;
    ElNotification({
      type: "warning",
      title: "线索上报",
      showClose: true,
      dangerouslyUseHTMLString: true,
      position: "bottom-right",
      message: html
    }); //消息推送
  });
});

const openTk = (id) => {
  let obj = circleList.value.find((item) => {
    return item.id == id;
  });
  if (obj) emitter.emit("showAj", [obj]);
};
// 搜索
const searchFn = () => {
  emitter.emit("deletePointArea", "search_bxd");
  emitter.emit("removeAll", "search_bxx");
  qcckGet({ keyword: keywords.value }, "/mosty-jmxf/jbldBxx/getBxxByKeyWord").then(res => {
    let lis = res || []
    let coords = []
    let bxd = []
    lis.forEach(v => {
      let obj = { coords: [v.zb], text: v.bxxMc }
      let zbd= v.bxds?v.bxds.map(item => {
        return {
          jd: item.jd,
          wd: item.wd,
          bxdMc:item.bxdMc,
          icon: item.sfdk == '0' || item.sfdk==null ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
        }
      }):[]
      bxd = [...bxd, ...zbd]
      coords.push(obj)
    })
    emitter.emit("echoLine", { coords, width: 4, flag: "search_bxx", type: 'dash', isclear: true, color: '#ff0000' });
    handlePoint(bxd, "", "search_bxd", 0.6, '#FF0000');
  })
}
// 获取列表
function getListData() {
  // , zdjqtjlx: "03", czzt: "0,1"
  let data = { pageSize: 1000, pageNum: 1 };
  getSelectVigilant(data).then((res) => {
    circleList.value = res.records;
    for (let i = 0; i < res.records.length; i++) {
      const el = res.records[i];
      emitter.emit("SsCircle", el);
      let { jd, wd } = el;
      emitter.emit("addPointArea", {
        coords: [{ jd, wd }],
        icon: require("@/assets/point/sos.png"),
        flag: "sosPoint"
      });
    }
  });
}
//点击下发指令
function clickXfzl() {
  emitter.emit("removePlot", "quanXuan");
  emitter.emit("deletePointArea", "centerpoint");
  emitter.emit("closeAllDialog");
  emitter.emit("showZlxf");
}
//点击群防群治
function clickQfqz() {
  emitter.emit("removePlot", "quanXuan");
  emitter.emit("deletePointArea", "centerpoint");
  emitter.emit("closeAllDialog");
  emitter.emit("showQfqz");
}
//点击犯罪预测
function clickAddEvent() {
  showVisible.value = !showVisible.value;
  if (!showVisible.value) calcelFzyc("");
}

//点击指导任务
function clickAddZdrw() {
  showVisibleZdrw.value = !showVisibleZdrw.value;
  if (!showVisibleZdrw.value) calcelZd("");
}

// 犯罪预测时间选择
function changeYcTime(val) {
  let time = [];
  switch (val) {
    case "今日":
      time = [getRecentDay(0), getRecentDay(0)];
      break;
    case "昨日":
      time = [getRecentDay(-1), getRecentDay(-1)];
      break;
    case "本周":
      time = getThistWeekDare("week");
      break;
    case "本月":
      time = getThistWeekDare("month");
      break;
    case "近30日":
      time = [getRecentDay(-30), getRecentDay(0)];
      break;
    case "本季度":
      time = getThistWeekDare("quarter");
      break;
    case "近半年":
      time = [getRecentDay(-181), getRecentDay(0)];
      break;
    case "近一年":
      time = [getRecentDay(-365), getRecentDay(0)];
      break;
  }
  fzycTime.value = time;
}

// 取消犯罪预测
function calcelFzyc(val) {
  fzycTime.value = [getRecentDay(0), getRecentDay(0)];
  listQuery.value = { ssbmdm: "" };
  selectTime_yc.value = "今日";
  showVisible.value = false;
  timeList.value.hasChoose = [];
}
// 取消犯罪预测
function calcelZd(val) {
  zdTime.value = [getRecentDay(0), getRecentDay(0)];
  listQueryZd.value = { ssbmdm: "" };
  selectTime_Zd.value = "今日";
  showVisibleZdrw.value = false;
  zldwList.hasChoose = [];
}
// 选择班次
function changeDataBC(val) {
  timeList.value.hasChoose = val;
}

// 选择指导任务
function changeDataZldrw(val) {
  zldwList.hasChoose = val;
}

// 指导巡逻
function handleZd() {
  emitter.emit("deletePointArea", "zdxl_zdrw");
  let list = D_BZ_SD.value.filter((v) => {
    if (zldwList.hasChoose.includes(v.label)) return v;
  });

  let params = {
    ...listQueryZd.value,
    sdList: list.map((v) => {
      return v.value;
    }),
    kssj: zdTime.value[0],
    jssj: zdTime.value[1]
  };
  queryListZdrw(params).then((res) => {
    if (res.length == 0) return false;
    let cc = [];
    let list = res.map((el, index) => {
      let centerPoint = [el.zxX, el.zxY];
      if (index == 0) cc = centerPoint;
      let position = [
        [Number(el.x1), Number(el.y1)],
        [Number(el.x2), Number(el.y2)]
      ];
      let text = el.dz + " " + el.xfsd;
      let obj = {
        position: position,
        text,
        id: el.id,
        userData: el,
        sfxl: el.sfxl
      };
      return obj;
    });
    let arr1 = list.filter((v) => {
      return v.sfxl == 1;
    });
    let arr2 = list.filter((v) => {
      return v.sfxl != 1;
    });
    let params1 = {
      fontColor: "#b51209",
      coords: arr2,
      type: "rectangle",
      flag: "zdxl_zdrw",
      color: "rgba(255,255,0,0.5)",
      linecolor: "#f51616"
    };
    let params2 = {
      fontColor: "#b51209",
      coords: arr1,
      type: "rectangle",
      flag: "zdxl_zdrw",
      color: "rgba(255,255,0,0.5)",
      linecolor: "#1C97FF"
    };
    emitter.emit("echoPlane", params1);
    emitter.emit("echoPlane", params2);
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  });
}

// 犯罪预测
function handleFzyc() {
  emitter.emit("deletePointArea", "zdxl_fzyc");
  let list = timeList.value.hasChoose.map((item) => {
    return item.slice(0, 2) + item.slice(5, 8);
  });
  let params = {
    ...listQuery.value,
    bcList: list,
    kssj: fzycTime.value[0],
    jssj: fzycTime.value[1]
  };
  queryListfzyc(params).then((res) => {
    if (res.length == 0) return false;
    let cc = [];
    let list = res.map((el, index) => {
      let centerPoint = [el.zxX, el.zxY];
      if (index == 0) cc = centerPoint;
      let position = [
        [Number(el.x1), Number(el.y1)],
        [Number(el.x2), Number(el.y2)]
      ];
      let text = el.realDate + " " + el.bc;
      let obj = {
        position: position,
        text,
        id: el.id,
        userData: el,
        sfxl: el.sfxl
      };
      return obj;
    });
    let arr1 = list.filter((v) => {
      return v.sfxl == 1;
    });
    let arr2 = list.filter((v) => {
      return v.sfxl != 1;
    });
    let params1 = {
      fontColor: "#12fdb8",
      coords: arr2,
      type: "rectangle",
      flag: "zdxl_fzyc",
      color: "rgba(2,20,51,0.5)",
      linecolor: "#f51616"
    };
    let params2 = {
      fontColor: "#12fdb8",
      coords: arr1,
      type: "rectangle",
      flag: "zdxl_fzyc",
      color: "rgba(2,20,51,0.5)",
      linecolor: "#1C97FF"
    };
    emitter.emit("echoPlane", params1);
    emitter.emit("echoPlane", params2);
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  });
}
const xfDiloag = ref(false)
//打开定制路线
const openZdXl = (val) => {
  if (val == 'zd') {
    show.zdlx = true;
  } else {
    emitter.emit("openZdXl", { show: true, type: 'ck' });
  }
};
// 处理撒点
function handlePoint(arr, icon, flag, scale, fontColor) {
  let list = arr.filter((item) => {
    item.identification = flag;
    return item.jd && item.wd;
  });
  if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
}
onUnmounted(() => {
  emitter.off("showWarning");
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

// 中间统计数据
.statisModel {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.Rank {
  left: 500px;
  position: absolute;
  z-index: 999;
  color: #010f30;
  font-size: 20px;
  top: 100px;
  left: 390px;
  cursor: pointer;
}

.showCount {
  width: 1100px;
  height: 90px;
  transition: height 1s;
  -webkit-transition: height 1s;
}

.heddenCount {
  width: 1100px;
  height: 0px;
  transition: height 1s;
  -webkit-transition: height 1s;
}

.transition {
  transition: all 0.5s;
}

.lineOption {
  position: absolute;
  z-index: 99;
  bottom: 100px;
  left: -100px;

  .option {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background: url('~@/assets/images/quan.png') no-repeat center center;
    background-size: 100% 100%;
    width: 80px;
    margin-bottom: 10px;
    margin: auto;
    height: 80px;
    border-radius: 50%;
    margin: auto 0;
    color: #0f6cd4;

    div {
      width: 99%;
      text-align: center;

    }
  }
}

.depBox {
  display: flex;
  align-items: center;
  color: #00bfff;
  margin-bottom: 10px;
}

.addBox {
  color: #fff;

  ::v-deep .el-radio {
    width: 74px;
    margin-right: 15px;
    color: #fff;
  }
}

.footerBtns {
  margin-top: 10px;
  text-align: center;
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #224ab5;
  // color: #fff;
  margin-right: 10px;
}

::v-deep .el-range-editor .el-range-input {
  background: transparent;
  // color: #fff;
}

::v-deep .el-date-editor .el-range-separator {
  color: #fff;
}

::v-deep .el-checkbox {
  color: #fff;
}

::v-deep .el-popper.is-light {
  background: #00314e;
  border: 1px solid #00314e;
}

::v-deep .el-popper.is-light .el-popper__arrow::before {
  background: #00314e;
}

.common-title {
  padding: 0 10px 0 54px;
  box-sizing: border-box;
  font-size: 22px;
  font-family: "YSBTH";
  background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
  -webkit-background-clip: text;
  justify-content: space-between;
}

.comom-cnt {
  height: calc(100% - 30px);
  padding: 4px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

::v-deep .el-select .el-input__inner {
  // width: 100px;
  height: 30px;
  // background: #061628;
  // background: url("~@/assets/images/streetBi/xzk.png") no-repeat center center;
  background-size: 100% 100%;
  // border: 1px solid #0072ff;
  border-radius: 2px;
  // color: #fff !important;
}

.search_box {
  position: absolute;
  top: 90px;
  left: 448px;
  z-index: 99;

  ::v-deep .el-input__inner {
    color: #606266 !important;
    width: 20vw;
    margin-right: 0;
  }
}
</style>

<style>
.el-notification {
  background: #052955;
  border: 1px solid #ff0526;
  box-shadow: inset 0 0 10px #ff0526;
}

.el-notification__content,
.el-notification__title {
  color: #fff;
}

.newCard {
  line-height: 20px;
  font-size: 14px;
  background: #052955;
}

.newCard .text {
  font-size: 12px;
  color: #6585af;
}

.newCard .text span {
  color: #0093ed;
}

.newCard .picture {
  display: flex;
}

.newCard .picture .pictureLeft {
  width: 60px;
  height: 60px;
  margin-right: 2px;
}

.el-notification.right {
  right: 410px;
}

.el-notification .el-notification--warning {
  color: #ff0526;
}

.el-notification .el-notification__closeBtn {
  color: #fff;
  top: 4px;
  right: 4px;
}
</style>
