dy_web_new_gd/src/views/largeScreen/home/layout/bottomBtn.vue

<template>
  <div class="footBox">
    <ul class="btnsBox">
      <li class="btnsItem" v-for="(item, index) in footBtnImg" :key="index" @click="chooseIcon(item)">
        <img :src="item.isChecked ? item.iconActive : item.icon" :title="item.title" style="max-width:66px" />
        <div class="resourceBox" v-if="item.hastc">
          <div class="contant" :class="item.type == 'across' ? 'contantAcross' : ''">
            <!-- 巡防区 -->
            <div style="width: 250px;padding-left: 20px;box-sizing: border-box;" v-if="item.title == '巡防区'">
              <el-radio-group v-model="radioValue" @change="chooseTag">
                <el-radio v-for="it in D_BZ_BMYWLX" :label="it.label" :value="it" :key="it.value" />
              </el-radio-group>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import { qcckGet } from "@/api/qcckApi.js";
import { ref, defineEmits, onMounted, getCurrentInstance, watch, reactive } from "vue";
import { getGazyPointList } from "@/api/dpApi/home.js";
const { proxy } = getCurrentInstance();
const { D_BZ_BMYWLX } = proxy.$dict("D_BZ_BMYWLX");
const emit = defineEmits(["myClick"]);
const radioValue = ref('')
const footBtnImg = ref([
  {
    hastc: false,
    isChecked: false,
    iconActive: require('@/assets/my/icon-gazy-active.png'),
    icon: require("@/assets/my/icon-gazy.png"),
    title: "公安局",
    type: 'vertical'
  },
  {
    hastc: false,
    isChecked: false,
    iconActive: require('@/assets/my/icon-jq-active.png'),
    icon: require("@/assets/my/icon-jq.png"),
    title: "派出所",
    type: 'vertical'
  },
  {
    hastc: false,
    isChecked: false,
    iconActive: require('@/assets/my/icon-shzy-active.png'),
    icon: require("@/assets/my/icon-shzy.png"),
    title: "警务站",
    type: 'vertical'
  },
  {
    hastc: true,
    isChecked: false,
    iconActive: require('@/assets/my/icon-sb-active.png'),
    icon: require("@/assets/my/icon-sb.png"),
    title: "巡防区",
    type: 'vertical'
  },
  {
    hastc: false,
    isChecked: false,
    iconActive: require('@/assets/my/icon-kfd-active.png'),
    icon: require("@/assets/my/icon-kfd.png"),
    title: "快反点",
    type: 'vertical'
  },
  {
    hastc: false,
    isChecked: false,
    iconActive: require('@/assets/my/icon-zdfk-active.png'),
    icon: require("@/assets/my/icon-zdfk.png"),
    title: "重点防控点",
    type: 'vertical'
  },
  {
    hastc: false,
    iconActive: require("@/assets/my/icon-clearn.png"),
    icon: require("@/assets/my/icon-clearn.png"),
    title: "清除",
    type: 'vertical'
  }
]);

onMounted(() => {
  window.openTExt = openTExt;
})

// 高亮巡防区域
function openTExt(id) {
  qcckGet({}, '/mosty-jcgl/tbJcglXfqy/selectById?id=' + id).then(res => {
    if (!res) return false
    let ddat = { arr: res.pgis, flag: 'xfqJS', color: '#b9332e', opacity: 0.6, isclear: true }
    handleArr(ddat)
  })
}

// 判断是否选择按钮
function chooseIcon(item) {
  item.isChecked = !item.isChecked;
  switch (item.title) {
    case '公安局':
      if (item.isChecked) showGazyMarker('公安局');
      else emitter.emit("deletePointArea", "gaj"); //清除公安局
      break;
    case '派出所':
      if (item.isChecked) showGazyMarker('派出所');
      else emitter.emit("deletePointArea", "pcs"); //清除派出所
      break;
    case '警务站':
      if (item.isChecked) showGazyMarker('警务站');
      else emitter.emit("deletePointArea", "jwz"); //清除警务站
      break;
    case '重点防控点':
      if (item.isChecked) showGazyMarker('重点防控点');
      else emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
      break;
    case '快反点':
      if (item.isChecked) {
        showGazyMarker('快反点');
      } else {
        emitter.emit("deletePointArea", "kfd");//清除快反点
        emitter.emit("deletePointArea", "kfdArea");
      }
      break;
    case '清除':
      clearAll()
      break;
  }
}


//一键清除
function clearAll() {
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("bd_closeOverlay", true);
  emitter.emit("closeAllDialog");
  emitter.emit("deletePointArea", "xfqJS"); //清除巡防区高亮
  emitter.emit("deletePointArea", "centerpoint");
  radioValue.value = ''
  footBtnImg.value.forEach(v => { v.isChecked = false })
}

// 选择巡防区域
function chooseTag(val) {
  footBtnImg.value[3].isChecked = true;
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("deleteText");
  let obj = D_BZ_BMYWLX.value.find(item => {
    return item.label == val
  })
  if(obj) showGazyMarker('巡防区', obj.dm)
}

// 显示公安资源信息
function showGazyMarker(val, dm) {
  if (val == "公安局") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001003" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/gaj.png");
      handlePoint(arr, icon, "gaj");
    });
  } else if (val == "派出所") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001004" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/pcs.png");
      handlePoint(arr, icon, "pcs");
    });
  } else if (val == "警务站") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001007" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/jwz.png");
      emitter.emit("showPoint", { coords: arr, icon, flag: 'jwz' });
    });
  } else if (val == "快反点") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001008" };
    getGazyPointList(data).then((res) => {
      if (res) {
        let icon = require("@/assets/point/f.png")
        emitter.emit("showPoint", { coords: res.records, icon, flag: 'kfd' });
      } else {
        ElMessage({ message: "暂无快反点数据", type: "warning" });
      }
    });
  } else if (val == "重点防控点") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001011" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/kfd.png");
      handlePoint(arr, icon, "zdfkd");
    });
  } else if (val == "巡防区") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
    if (dm) data.bz = dm
    getGazyPointList(data).then((res) => {
      console.log(res);
      if ( res && res.records.length > 0) {
        let color = { stops: [], property: 'FID', }
        let linecolor = { stops: [] }
        let arrs = res.records.map((item, idx) => {
          let ys = changeColor(item.color, 0.4)
          linecolor.stops.push(ys.replace(0.4, 1))
          color.stops.push([idx + 1, ys])
          let obj = { position: [item.dtm], FID: idx + 1, text: item.gajgmc, id: item.id }
          if (item.dtm) return obj;
        })
        let params = { coords: arrs, type: 'polygon', flag: 'xfq', color }
        emitter.emit("echoPlane", params);
      } else {
        ElMessage({ message: "暂无巡防区数据", type: "warning" });
      }
    });
  }
}
// 颜色转换成rgba格式
function changeColor(hex, opacity) {
  return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
}

// 处理撒点
function handlePoint(arr, icon, flag, scale) {
  let list = arr.filter((item) => { return item.jd && item.wd; });
  if (list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: flag, scale });
}
// 处理1-3-5数据
function handleArr(obj) {
  let brr = [];
  let crr = [];
  obj.arr.forEach((val1) => { brr.push(...val1); });
  let str = brr.toString();
  crr.push(str);
  let params = { coords: crr, flag: obj.flag, color: obj.color, opacity: obj.opacity, isclear: obj.isclear || false }
  emitter.emit("polygonFigure", params);
}

</script>

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

.search_gzy_box {
  position: relative;

  .search_key_outBox {
    width: 100%;
    bottom: 52px;
    position: absolute;

    .search_key {
      width: 100%;
      padding: 10px;
      background: #041f6e;
      border-radius: 4px;
      max-height: 60vh;
      overflow: hidden;
      overflow-y: auto;

      .key_item {
        line-height: 30px;
        border-bottom: 1px solid #565656;
        padding-left: 10px;
      }

      .key_item:hover {
        background: #0d4a62;
        color: #12d2b0;
      }
    }
  }

  .search_key_outBox::after {
    // position:absolute;
    // content:'';
    // width:0;
    // height:0;
    // bottom:-20px;
    // left:50%;
    // transform: tanslateX(-50%);
    // border:10px solid;
    // border-color:#041f6e transparent transparent  transparent;
  }
}

.depBox {
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #00bfff;
}

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

::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}

::v-deep .el-radio-group {
  width: 100%;
  // padding-left:20px;
}

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

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

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

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #01e9ed;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #01e9ed;
  border-color: #01e9ed;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #01e9ed;
  border-color: #01e9ed;
}

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

::v-deep .el-input-group__append {
  background-color: transparent;
  border: none;
  padding: 0 12px;
}

.jqTimeBox {
  ::v-deep .el-date-range-picker {
    width: 500px;
  }

  ::v-deep .el-input__inner {
    color: #000;
  }

  ::v-deep .el-time-panel {
    left: -52px;
  }
}
</style>