首页相关调整

shuishen

2025-11-11 d0fa69584866a1ea703f370aec7eea266ba85b94

首页相关调整

 src/api/home/index.js

@@ -2,22 +2,22 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 14:19:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-19 14:34:52
 * @LastEditTime: 2025-11-10 19:33:42
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description:
 *
 * Copyright (c) 2023 by shuishen 1109946754@qq.com, All Rights Reserved.
 */
import request from "@/router/axios.js";
import request from "@/router/axios.js"

let equipmentNum = "";
let equipmentNum = ""

if (process.env.NODE_ENV == "development") {
  // 开发
  equipmentNum = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_EQUIPMENT;
    // 开发
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_EQUIPMENT
} else {
  // 部署
  equipmentNum = window.BASE_URL_CONFIG.VUE_APP_INTRANET_EQUIPMENT;
    // 部署
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_INTRANET_EQUIPMENT
}

/**
@@ -27,16 +27,16 @@
 */
// export const getSchedulingList = (current, size, params) => {
export const getSchedulingList = (params) => {
  return request({
    url: `/api/scheduling/scheduling/page`,
    method: "get",
    params: {
      ...params,
      // current: current,
      // size: size
    },
  });
};
    return request({
        url: `/api/scheduling/scheduling/page`,
        method: "get",
        params: {
            ...params,
            // current: current,
            // size: size
        },
    })
}

/**
 * 获取值班单位集合信息
@@ -44,231 +44,278 @@
 * @returns
 */
export const getSchedulingDeptList = (current, size, params) => {
  return request({
    url: `/api/scheduling/scheduling/getSchedulingDeptList`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/scheduling/scheduling/getSchedulingDeptList`,
        method: "get",
        params: params,
    })
}

export const getAnswerPolices = (params) => {
  return request({
    url: `/api/doorplate/doorplate/acceptAlarmList`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/doorplate/doorplate/acceptAlarmList`,
        method: "get",
        params: params,
    })
}

export const getCallPolices = () => {
  return request({
    url: `/api/doorplate/doorplate/setOutAlarmList`,
    method: "get",
    params: {},
  });
};
    return request({
        url: `/api/doorplate/doorplate/setOutAlarmList`,
        method: "get",
        params: {},
    })
}

// 获取接警历史记录
export const getAlarmList = (params) => {
  return request({
    url: `/api/alarm/alarm/page`,
    method: "get",
    params: {
      ...params,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/page`,
        method: "get",
        params: {
            ...params,
        },
    })
}

// 获取接警历史记录统计数据
export const getAlarmStatistics = (params) => {
  return request({
    url: `/api/alarm/alarm/statisticsAlarmByBJLX`,
    method: "get",
    params: {
      ...params,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/statisticsAlarmByBJLX`,
        method: "get",
        params: {
            ...params,
        },
    })
}

// 获取处警历史
export const getActAsPoliceList = (alarmID, cjdwbh = "") => {
  return request({
    url: `/api/outAlarm/outAlarm/page`,
    method: "get",
    params: {
      current: 1,
      size: 100,
      alarmID,
      cjdwbh,
    },
  });
};
    return request({
        url: `/api/outAlarm/outAlarm/page`,
        method: "get",
        params: {
            current: 1,
            size: 100,
            alarmID,
            cjdwbh,
        },
    })
}

// 案件统计数量接口查询
export const getCaseAll = (start, end, jjdwbh = "") => {
  return request({
    url: `/api/alarm/alarm/statisticsAlarm`,
    method: "get",
    params: {
      start,
      end,
      jjdwbh,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/statisticsAlarm`,
        method: "get",
        params: {
            start,
            end,
            jjdwbh,
        },
    })
}

// 案件统计社区排行接口查询
export const getCaseRanking = (start, end, dwbh = "") => {
  return request({
    url: `/api/alarm/alarm/getAlarmVillageOrderList`,
    method: "get",
    params: {
      start,
      end,
      dwbh,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/getAlarmVillageOrderList`,
        method: "get",
        params: {
            start,
            end,
            dwbh,
        },
    })
}

// 案件统计辖区排行接口查询
export const getCaseRankingArea = (start, end, dwbh = "") => {
  return request({
    url: `/api/alarm/alarm/getAlarmStatisticsByPoliceOrArea`,
    method: "get",
    params: {
      start,
      end,
      dwbh,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/getAlarmStatisticsByPoliceOrArea`,
        method: "get",
        params: {
            start,
            end,
            dwbh,
        },
    })
}

// 获取设备统计数据
export const getEquipment = (jjdwbh = "") => {
  return request({
    url: `/api/alarm/alarm/statisticsCameraTypeOnline`,
    method: "get",
    params: {
      jjdwbh,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/statisticsCameraTypeOnline`,
        method: "get",
        params: {
            jjdwbh,
        },
    })
}

// 派出所责任区小区-获取三级区域数据
export const getPoliceStationTree = (type, id) => {
  return request({
    url: `/api/policeStationInfo/policeStationInfo/getPoliceStationTree`,
    method: "get",
    params: {
      type,
      id,
    },
  });
};
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getPoliceStationTree`,
        method: "get",
        params: {
            type,
            id,
        },
    })
}

// 现有小区模块
export const getAreaStatisticInfo = (type, deptId) => {
  return request({
    url: `/api/policeStationInfo/policeStationInfo/getAreaStatisticInfo`,
    method: "get",
    params: {
      type,
      deptId,
    },
  });
};
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getAreaStatisticInfo`,
        method: "get",
        params: {
            type,
            deptId,
        },
    })
}

// 获取设备分页数据
export const getEquipmentPaging = (params) => {
  return request({
    url: `/device/query/devices/${equipmentNum}/channelsCar`,
    method: "get",
    requestBaseUrl: "outside",
    params: {
      ...params,
    },
  });
};
    return request({
        url: `/device/query/devices/${equipmentNum}/channelsCar`,
        method: "get",
        requestBaseUrl: "outside",
        params: {
            ...params,
        },
    })
}

// 获取设备数据
export const getEquipmentAll = (params) => {
  return request({
    url: `/api/alarm/alarm/channelsCarAll`,
    method: "get",
    params: {
      ...params,
      deviceId: equipmentNum,
    },
  });
};
    return request({
        url: `/api/alarm/alarm/channelsCarAll`,
        method: "get",
        params: {
            ...params,
            deviceId: equipmentNum,
        },
    })
}

// 获取现有小区详情弹窗
export const getLandDetail = (params) => {
  return request({
    url: `/api/policeStationInfo/policeStationInfo/page`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/policeStationInfo/policeStationInfo/page`,
        method: "get",
        params: params,
    })
}

//实有房屋统计
export const getVillageStatisticData = (params) => {
  return request({
    url: `/api/villageDetail/villageDetail/getVillageStatisticData`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/villageDetail/villageDetail/getVillageStatisticData`,
        method: "get",
        params: params,
    })
}

//实有房屋统计--详情
export const getVillageStatisticDetail = (params) => {
  return request({
    url: `/api/villageDetail/villageDetail/page`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/villageDetail/villageDetail/page`,
        method: "get",
        params: params,
    })
}

//关注场所统计
export const getPlaceOfConcernStatisticData = (params) => {
  return request({
    url: `/api/placeOfConcern/placeOfConcern/getPlaceOfConcernStatisticData`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/placeOfConcern/placeOfConcern/getPlaceOfConcernStatisticData`,
        method: "get",
        params: params,
    })
}

//关注场所统计--详情
export const getPlaceOfConcernStatisticDetail = (params) => {
  return request({
    url: `/api/placeOfConcern/placeOfConcern/page`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/placeOfConcern/placeOfConcern/page`,
        method: "get",
        params: params,
    })
}

//实有住宅和关注场所统计总数
export const getVillageDetailAndPlaceStatisticNumber = (params) => {
  return request({
    url: `/api/placeOfConcern/placeOfConcern/getVillageDetailAndPlaceStatisticNumber`,
    method: "get",
    params: params,
  });
};
    return request({
        url: `/api/placeOfConcern/placeOfConcern/getVillageDetailAndPlaceStatisticNumber`,
        method: "get",
        params: params,
    })
}

//酒店住户列表
export const getCheckInInfo = (params) => {
  return request({
    url: `/api/checkInInfo/checkInInfo/page`,
    method: "get",
    params,
  });
};
    return request({
        url: `/api/checkInInfo/checkInInfo/page`,
        method: "get",
        params,
    })
}

// 九小场所相关数量
export const getNineStatistics = (params) => {
  return request({
    url: `/api/blade-place/place/getNineStatistics`,
    method: "get",
    params,
  });
    return request({
        url: `/api/blade-place/place/getNineStatistics`,
        method: "get",
        params,
    })
}

/**
 * 获取地址总数 echarts
 * @param {*}
 * @returns
 */
export const getCountByType = (params) => {
    return request({
        url: `/api/realEstate/realEstate/countByType`,
        method: "get",
        params: {
            ...params,
        },
    })
}

/**
 * 获取制牌总数 echarts
 * @param {*}
 * @returns
 */
export const getCountByTypeMp = (params) => {
    return request({
        url: `/api/realEstate/realEstate/countByTypeMp`,
        method: "get",
        params: {
            ...params,
        },
    })
}


/**
 * 获取地址列表 echarts
 * @param {*}
 * @returns
 */
export const getRealEstatePage = (params) => {
    return request({
        url: `/api/realEstate/realEstate/page`,
        method: "get",
        params: {
            ...params,
        },
    })
};


 src/components/mapAddressSearchBox/index.vue

New file
@@ -0,0 +1,262 @@
<template>
    <div>
        <div class="search-content">
            <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue"
                @input="searchInputTree" placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>

            <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
                <div class="dropdown-menu" @scroll="handleScroll">
                    <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                        :key="index">
                        {{ item.address }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getRealEstatePage } from "@/api/home/index.js"
export default {
    name: "mapAddressSearchBox",

    data () {
        return {
            searchExtensivelyValue: "",
            isShowClearBtn: false,
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            isClickValBox: false,
            pageIndex: 1,
            pageSize: 10,
            pages: 1
        }
    },

    watch: {
    },

    methods: {
        handleScroll (event) {
            const isScrollingDown = this.pageIndex <= this.pages
            console.log(isScrollingDown)
            if (isScrollingDown == true) {
                this.pageIndex++
                this.searchExtensivelyFocus()
            }
        },
        searchExtensivelyClick () {
            this.getSearchExtensively(
                "81503dad589f42bf9a9e5ea5e017f329",
                "361102",
                this.searchExtensivelyValue
            )
            this.searchExtensivelyValBoxShow = false

            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit("toPosition", {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })

                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name

                this.$EventBus.$emit("mapClearLayer", {
                    layerName: "searchLayer",
                    type: "VectorLayer",
                })

                this.$EventBus.$emit("layerPointAdd", {
                    layerName: "searchLayer",
                    type: "label",
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 1,
                        text: this.searchExtensivelyArray[0].name,
                    },
                })
            }
        },

        clearSearchValue () {
            this.$store.commit("SET_MAPSEARCHPOPUP", false)

            this.$EventBus.$emit("mapRemoveLayer", {
                layerName: "searchLayer",
                type: "VectorLayer",
            })
            this.searchExtensivelyValue = ""
            this.searchExtensivelyChange()
        },

        searchExtensivelyChange (e) {
            // console.log(e)
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively(
                this.searchExtensivelyValue
            )
        },

        // 大搜
        getSearchExtensively (address) {
            getRealEstatePage({ address: address, size: 1000 }).then(res => {
                const data = res.data.data.records
                if (data) {
                    data.forEach(element => {
                        this.searchExtensivelyArray.push(element)
                    })
                }
            })
        },

        searchExtensivelyVlaClick (item) {
            const { x2000: lng, y2000: lat } = item

            this.$store.commit("SET_MAPSEARCHPOPUP", false)
            this.searchExtensivelyValBoxShow = false
            this.isClickValBox = true

            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit("toPosition", {
                siteJd: `${lng}`,
                siteWd: `${lat}`,
                siteGd: 1000,
            })
            this.$EventBus.$emit("mapClearLayer", {
                layerName: "searchLayer",
                type: "VectorLayer",
            })

            this.$store.commit("SET_MAPSEARCHPOPUP", true)

            this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
                ...item,
                name: item.address
            })

            var popup = new global.DC.DivForms(global.viewer, {
                domId: "mapSearchPopup",
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(lng),
                            Number(lat),
                            0
                        )
                    ),
                ],
            })

            this.$EventBus.$emit("layerPointAdd", {
                layerName: "searchLayer",
                type: "billboard",
                params: {
                    lng: `${lng}`,
                    lat: `${lat}`,
                    alt: 1,
                    url: "/img/icon/location.png",
                },
            })
        },

        searchInputTree (newText) {
            this.searchExtensivelyArray = []

            if (newText == "") {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
            } else {
                this.searchExtensivelyValBoxShow = true

                if (this.isClickValBox) {
                    this.searchExtensivelyValBoxShow = false
                    this.isClickValBox = false
                } else {
                    this.$EventBus.$emit("mapClearLayer", {
                        layerName: "searchLayer",
                        type: "VectorLayer",
                    })
                }
                this.isShowClearBtn = true
                this.getSearchExtensively(
                    this.searchExtensivelyValue
                )
            }
        },
    },

    destroyed () {
        this.$store.commit("SET_MAPSEARCHPOPUP", false)

        this.$EventBus.$emit("mapRemoveLayer", {
            layerName: "searchLayer",
            type: "VectorLayer",
        })
    },
}
</script>

<style lang="scss" scoped>
.search-content {
    position: fixed;
    z-index: 99;
    left: 770px;
    top: 140px;
    width: 380px;
    height: 36px;
    display: flex;

    ::v-deep(.el-input) {
        flex: 1;
        display: flex;

        input {
            flex: 1;
            font-size: 14px;
        }
    }
}

.searchExtensively-val-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 50%;
    width: 380px;
    max-height: 160px;
    text-align: left;
    color: #fff;
    background: $el-dialog-bg-color;
    z-index: 1111;
    border-radius: 10px;
    overflow: hidden;
    transform: translate(-50%, 0);

    &>div {
        height: 100%;
        overflow-y: auto;

        div {
            padding: 0 10px;
            line-height: 36px;
            cursor: pointer;
        }
    }
}

.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-menu li.active {
    background-color: highlight;
}
</style>

 src/components/mapSearchBox/index.vue

@@ -1,260 +1,261 @@
<template>
  <div>
    <div class="search-content">
      <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue" @input="searchInputTree"
        placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
    </div>
    <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
      <div class="dropdown-menu" @scroll="handleScroll">
        <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
          {{ item.name }}
    <div>
        <div class="search-content">
            <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue"
                @input="searchInputTree" placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
        </div>
      </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div class="dropdown-menu" @scroll="handleScroll">
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getSearchExtensivelyPage } from "@/api/dept/index.js"
export default {
  name: "mapSearchBox",
    name: "mapSearchBox",

  data () {
    return {
      searchExtensivelyValue: "",
      isShowClearBtn: false,
      searchExtensivelyValBoxShow: false,
      searchExtensivelyArray: [],
      isClickValBox: false,
      pageIndex: 1,
      pageSize: 10,
      pages: 1
    }
  },

  watch: {
  },

  methods: {
    handleScroll (event) {
      const isScrollingDown = this.pageIndex <= this.pages
      console.log(isScrollingDown)
      if (isScrollingDown == true) {
        this.pageIndex++
        this.searchExtensivelyFocus()
      }
    },
    searchExtensivelyClick () {
      this.getSearchExtensively(
        "81503dad589f42bf9a9e5ea5e017f329",
        "361102",
        this.searchExtensivelyValue
      )
      this.searchExtensivelyValBoxShow = false

      if (this.searchExtensivelyArray.length > 0) {
        this.$EventBus.$emit("toPosition", {
          siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
          siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
          siteGd: 200,
        })

        this.searchExtensivelyValue = this.searchExtensivelyArray[0].name

        this.$EventBus.$emit("mapClearLayer", {
          layerName: "searchLayer",
          type: "VectorLayer",
        })

        this.$EventBus.$emit("layerPointAdd", {
          layerName: "searchLayer",
          type: "label",
          params: {
            lng: `${this.searchExtensivelyArray[0].location.lng}`,
            lat: `${this.searchExtensivelyArray[0].location.lat}`,
            alt: 1,
            text: this.searchExtensivelyArray[0].name,
          },
        })
      }
    },

    clearSearchValue () {
      this.$store.commit("SET_MAPSEARCHPOPUP", false)

      this.$EventBus.$emit("mapRemoveLayer", {
        layerName: "searchLayer",
        type: "VectorLayer",
      })
      this.searchExtensivelyValue = ""
      this.searchExtensivelyChange()
    },

    searchExtensivelyChange (e) {
      // console.log(e)
    },

    searchExtensivelyFocus () {
      this.searchExtensivelyValBoxShow = true
      this.getSearchExtensively(
        "81503dad589f42bf9a9e5ea5e017f329",
        "361102",
        this.searchExtensivelyValue
      )
    },

    // 大搜
    getSearchExtensively (ak, region, query) {
      getSearchExtensivelyPage(ak, region, query, this.pageIndex, this.pageSize).then(res => {
        const data = res.data.result
        if (data) {
          data.forEach(element => {
            this.searchExtensivelyArray.push(element)
          })
    data () {
        return {
            searchExtensivelyValue: "",
            isShowClearBtn: false,
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            isClickValBox: false,
            pageIndex: 1,
            pageSize: 10,
            pages: 1
        }
      })
    },

    searchExtensivelyVlaClick (item) {
      this.$store.commit("SET_MAPSEARCHPOPUP", false)
      this.searchExtensivelyValBoxShow = false
      this.isClickValBox = true
    watch: {
    },

      this.searchExtensivelyValue = item.name
      this.$EventBus.$emit("toPosition", {
        siteJd: `${item.location.lng}`,
        siteWd: `${item.location.lat}`,
        siteGd: 1000,
      })
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "searchLayer",
        type: "VectorLayer",
      })

      this.$store.commit("SET_MAPSEARCHPOPUP", true)

      this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
        ...item,
      })

      var popup = new global.DC.DivForms(global.viewer, {
        domId: "mapSearchPopup",
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(item.location.lng),
              Number(item.location.lat),
              0
            )
          ),
        ],
      })

      this.$EventBus.$emit("layerPointAdd", {
        layerName: "searchLayer",
        type: "billboard",
        params: {
          lng: `${item.location.lng}`,
          lat: `${item.location.lat}`,
          alt: 1,
          url: "/img/icon/location.png",
    methods: {
        handleScroll (event) {
            const isScrollingDown = this.pageIndex <= this.pages
            console.log(isScrollingDown)
            if (isScrollingDown == true) {
                this.pageIndex++
                this.searchExtensivelyFocus()
            }
        },
      })
        searchExtensivelyClick () {
            this.getSearchExtensively(
                "81503dad589f42bf9a9e5ea5e017f329",
                "361102",
                this.searchExtensivelyValue
            )
            this.searchExtensivelyValBoxShow = false

            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit("toPosition", {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })

                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name

                this.$EventBus.$emit("mapClearLayer", {
                    layerName: "searchLayer",
                    type: "VectorLayer",
                })

                this.$EventBus.$emit("layerPointAdd", {
                    layerName: "searchLayer",
                    type: "label",
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 1,
                        text: this.searchExtensivelyArray[0].name,
                    },
                })
            }
        },

        clearSearchValue () {
            this.$store.commit("SET_MAPSEARCHPOPUP", false)

            this.$EventBus.$emit("mapRemoveLayer", {
                layerName: "searchLayer",
                type: "VectorLayer",
            })
            this.searchExtensivelyValue = ""
            this.searchExtensivelyChange()
        },

        searchExtensivelyChange (e) {
            // console.log(e)
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively(
                "81503dad589f42bf9a9e5ea5e017f329",
                "361102",
                this.searchExtensivelyValue
            )
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensivelyPage(ak, region, query, this.pageIndex, this.pageSize).then(res => {
                const data = res.data.result
                if (data) {
                    data.forEach(element => {
                        this.searchExtensivelyArray.push(element)
                    })
                }
            })
        },

        searchExtensivelyVlaClick (item) {
            this.$store.commit("SET_MAPSEARCHPOPUP", false)
            this.searchExtensivelyValBoxShow = false
            this.isClickValBox = true

            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit("toPosition", {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 1000,
            })
            this.$EventBus.$emit("mapClearLayer", {
                layerName: "searchLayer",
                type: "VectorLayer",
            })

            this.$store.commit("SET_MAPSEARCHPOPUP", true)

            this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
                ...item,
            })

            var popup = new global.DC.DivForms(global.viewer, {
                domId: "mapSearchPopup",
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(item.location.lng),
                            Number(item.location.lat),
                            0
                        )
                    ),
                ],
            })

            this.$EventBus.$emit("layerPointAdd", {
                layerName: "searchLayer",
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    url: "/img/icon/location.png",
                },
            })
        },

        searchInputTree (newText) {
            this.searchExtensivelyArray = []

            if (newText == "") {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
            } else {
                this.searchExtensivelyValBoxShow = true

                if (this.isClickValBox) {
                    this.searchExtensivelyValBoxShow = false
                    this.isClickValBox = false
                } else {
                    this.$EventBus.$emit("mapClearLayer", {
                        layerName: "searchLayer",
                        type: "VectorLayer",
                    })
                }
                this.isShowClearBtn = true
                this.getSearchExtensively(
                    "81503dad589f42bf9a9e5ea5e017f329",
                    "361121",
                    this.searchExtensivelyValue
                )
            }
        },
    },

    searchInputTree (newText) {
      this.searchExtensivelyArray = []
    destroyed () {
        this.$store.commit("SET_MAPSEARCHPOPUP", false)

      if (newText == "") {
        this.searchExtensivelyValBoxShow = false
        this.isShowClearBtn = false
      } else {
        this.searchExtensivelyValBoxShow = true

        if (this.isClickValBox) {
          this.searchExtensivelyValBoxShow = false
          this.isClickValBox = false
        } else {
          this.$EventBus.$emit("mapClearLayer", {
        this.$EventBus.$emit("mapRemoveLayer", {
            layerName: "searchLayer",
            type: "VectorLayer",
          })
        }
        this.isShowClearBtn = true
        this.getSearchExtensively(
          "81503dad589f42bf9a9e5ea5e017f329",
          "361121",
          this.searchExtensivelyValue
        )
      }
        })
    },
  },

  destroyed () {
    this.$store.commit("SET_MAPSEARCHPOPUP", false)

    this.$EventBus.$emit("mapRemoveLayer", {
      layerName: "searchLayer",
      type: "VectorLayer",
    })
  },
}
</script>

<style lang="scss" scoped>
.search-content {
  position: fixed;
  z-index: 99;
  left: 770px;
  top: 40px;
  width: 380px;
  height: 36px;
  display: flex;

  ::v-deep(.el-input) {
    flex: 1;
    position: fixed;
    z-index: 99;
    left: 770px;
    top: 40px;
    width: 380px;
    height: 36px;
    display: flex;

    input {
      flex: 1;
      font-size: 14px;
    ::v-deep(.el-input) {
        flex: 1;
        display: flex;

        input {
            flex: 1;
            font-size: 14px;
        }
    }
  }
}

.searchExtensively-val-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 80px;
  left: 770px;
  width: 380px;
  max-height: 160px;
  text-align: left;
  color: #fff;
  background: $el-dialog-bg-color;
  z-index: 1111;
  border-radius: 10px;
  overflow: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 770px;
    width: 380px;
    max-height: 160px;
    text-align: left;
    color: #fff;
    background: $el-dialog-bg-color;
    z-index: 1111;
    border-radius: 10px;
    overflow: hidden;

  &>div {
    height: 100%;
    overflow-y: auto;
    &>div {
        height: 100%;
        overflow-y: auto;

    div {
      padding: 0 10px;
      line-height: 36px;
      cursor: pointer;
        div {
            padding: 0 10px;
            line-height: 36px;
            cursor: pointer;
        }
    }
  }
}

.dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-menu li.active {
  background-color: highlight;
    background-color: highlight;
}
</style>

 src/styles/media/index.scss

Diff too large

 src/views/home/components/rightContainer.vue

@@ -112,19 +112,11 @@

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                <div class="title">地址总数：{{ addresCount }}</div>
                <el-main v-loading="CountByTypeEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                    <div style="overflow: hidden" id="CountByTypeEcharts" class="echarts-box"></div>
                </el-main>
            </div>

@@ -165,19 +157,11 @@

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                <div class="title">制牌总数：{{ zpCount }}</div>
                <el-main v-loading="CountByTypeMpEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                    <div style="overflow: hidden" id="CountByTypeMpEcharts" class="echarts-box"></div>
                </el-main>
            </div>

@@ -193,6 +177,9 @@
</template>

<script>
let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']

let countByTypeMyChart, countByTypeMpMyChart
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
@@ -213,7 +200,11 @@
let equimentDataLength = 0

import recorderArr from "@/assets/data/equimentsDate/recorder.js"
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import {
    getSchedulingList, getSchedulingDeptList,
    getCountByType,
    getCountByTypeMp
} from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"

import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"
@@ -224,11 +215,16 @@
    inject: ["userInfo"],
    data () {
        return {
            addresCount: '',
            zpCount: '',
            eventTime: [],
            CountByTypeEchartsLoading: false,
            CountByTypeMpEchartsLoading: false,
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,

            pickerOptions: {
                shortcuts: [
                    {
@@ -274,6 +270,8 @@
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            areaId: '',
            aoiId: '',
            showMJL: false,
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
@@ -292,10 +290,6 @@
        }

        this.defaultDate()

        this.getSchedulingList()

        this.getSchedulingDeptList()
    },

    mounted () {
@@ -336,12 +330,15 @@
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = "") {
            this.policeStaionID = id
        getHomeAllData (deptId = "", areaId = '', aoiId = '') {
            console.log("26666666666666", deptId, areaId, aoiId)
            this.policeStaionID = deptId
            this.aoiId = aoiId
            this.areaId = areaId

            this.initEventChangeEcharts(this.caseInfoType)
            this.getCountByType()

            this.initEquipmentEcharts(this.linetype)
            this.getCountByTypeMp()

            if (rightTiming != null) {
                clearInterval(rightTiming)
@@ -349,73 +346,235 @@
            }

            rightTiming = setInterval(async () => {
                this.initEventChangeEcharts(this.caseInfoType)
                this.initEquipmentEcharts(this.linetype)
                this.getCountByType()

                this.getCountByTypeMp()
            }, 600000)
        },

        getSchedulingList () {
            this.schedulingLoading = true
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                const data = [
        getCountByType () {
            this.CountByTypeEchartsLoading = true
            this.disposeEchart()
            getCountByType({
                deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
                areaId: this.areaId,
                aoiId: this.aoiId
            }).then(res => {
                let data = res.data.data
                this.addresCount = 0
                data.forEach(item => {
                    this.addresCount = this.addresCount + item.count
                })

                let echartsData = [
                    {
                        person:
                            "徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
                        patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
                    }
                        type: 'unit',
                        num: 0,
                        name: '单元地址'
                    },
                    {
                        type: 'road_no',
                        num: 0,
                        name: '沿街门牌地址'
                    },
                    {
                        type: 'aoi',
                        num: 0,
                        name: '院落地址'
                    },
                    {
                        type: 'room',
                        num: 0,
                        name: '户室地址'
                    },
                    {
                        type: 'building',
                        num: 0,
                        name: '楼栋地址'
                    },
                ]

                const matrixData = data.map((row) => {
                    let arr = []
                    for (let key in row) {
                        arr.push(row[key])
                    }
                    return arr
                })
                setTimeout(() => {
                    this.schedulingList = matrixData[0].map((col, i) => {
                        return [this.originTitle[i], ...matrixData.map((row) => {
                            return row[i]
                        })]
                data.forEach(item => {
                    echartsData.forEach(i => {
                        if (item.type === i.type) {
                            i.num = item.count
                        }
                    })
                    this.schedulingLoading = false
                }, 1000)

                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
                        this.$refs.caseBox.offsetHeight -
                        this.$refs.crowdBox.offsetHeight -
                        this.$refs.alertBoxTitle.offsetHeight
                })

                this.showMJL = true
                this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 1)
            })
        },

        getCountByTypeMp () {
            this.CountByTypeMpEchartsLoading = true
            this.disposeEchart()
            getCountByTypeMp({
                deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
                areaId: this.areaId,
                aoiId: this.aoiId
            }).then(res => {
                let data = res.data.data
                this.zpCount = 0
                data.forEach(item => {
                    this.zpCount = this.zpCount + item.count
                })
                let echartsData = [
                    {
                        type: 'unit',
                        num: 0,
                        name: '单元牌'
                    },
                    {
                        type: 'road_no',
                        num: 0,
                        name: '中门牌'
                    },
                    {
                        type: 'aoi',
                        num: 0,
                        name: '大门牌'
                    },
                    {
                        type: 'room',
                        num: 0,
                        name: '户室牌'
                    },
                    {
                        type: 'building',
                        num: 0,
                        name: '楼栋牌'
                    },
                ]

                data.forEach(item => {
                    echartsData.forEach(i => {
                        if (item.type === i.type) {
                            i.num = item.count
                        }
                    })
                })

                this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 2)
            })
        },

        initCountByTypeEcharts (xDate, yDate, type) {
            if (type === 1) {
                var chartDom = document.getElementById('CountByTypeEcharts')

                countByTypeMyChart = this.$echarts.init(chartDom)
                countByTypeMyChart.setOption(this.initCountyByOptions(xDate, yDate))

                this.CountByTypeEchartsLoading = false
            } else {
                const params = {
                    sameday: 1,
                    isPage: 1
                }
                var chartMpDom = document.getElementById('CountByTypeMpEcharts')

                this.showMJL = false
                countByTypeMpMyChart = this.$echarts.init(chartMpDom)
                countByTypeMpMyChart.setOption(this.initCountyByOptions(xDate, yDate, '#3498db'))

                getSchedulingList(params).then((res) => {
                    let a = [], b = []
                    a = res.data.data.filter(i => i.dept == '经开分局')
                    b = res.data.data.filter(i => i.dept != '经开分局')
                this.CountByTypeMpEchartsLoading = false
            }
        },

                    this.schedulingList = [...a, ...b]
                })
        initCountyByOptions (xDate, yDate, color = '#2ecc71') {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2)
                        } else {
                            msg = params.value
                        }

                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                }, 500)
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                color: color,
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: color,
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                }
            }
        },

        disposeEchart () {
            if (countByTypeMyChart != null && countByTypeMyChart != '' && countByTypeMyChart != undefined) {
                countByTypeMyChart.clear()
                countByTypeMyChart.dispose()
                countByTypeMyChart.off('click')
            }

            if (countByTypeMpMyChart != null && countByTypeMpMyChart != '' && countByTypeMpMyChart != undefined) {
                countByTypeMpMyChart.clear()
                countByTypeMpMyChart.dispose()
                countByTypeMpMyChart.off('click')
            }
        },

@@ -1344,6 +1503,7 @@

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)
        this.disposeEchart()

        if (equipmentmyChart) {
            equipmentmyChart.dispose()

 src/views/home/index.vue

Diff too large