经开分局优化

linwe

2025-11-12 7cb918571b7bc7a5e9d9002292fd749ed1b95c95

经开分局优化

 src/api/home/index.js

@@ -13,11 +13,11 @@
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,15 +27,15 @@
 */
// 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,233 +44,233 @@
 * @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,
  })
}

/**
@@ -279,13 +279,13 @@
 * @returns
 */
export const getCountByType = (params) => {
    return request({
        url: `/api/realEstate/realEstate/countByType`,
        method: "get",
        params: {
            ...params,
        },
    })
  return request({
    url: `/api/realEstate/realEstate/countByType`,
    method: "get",
    params: {
      ...params,
    },
  })
}

/**
@@ -294,13 +294,13 @@
 * @returns
 */
export const getCountByTypeMp = (params) => {
    return request({
        url: `/api/realEstate/realEstate/countByTypeMp`,
        method: "get",
        params: {
            ...params,
        },
    })
  return request({
    url: `/api/realEstate/realEstate/countByTypeMp`,
    method: "get",
    params: {
      ...params,
    },
  })
}


@@ -310,12 +310,26 @@
 * @returns
 */
export const getRealEstatePage = (params) => {
    return request({
        url: `/api/realEstate/realEstate/page`,
        method: "get",
        params: {
            ...params,
        },
    })
};
  return request({
    url: `/api/realEstate/realEstate/page`,
    method: "get",
    params: {
      ...params,
    },
  })
}

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

 src/components/mapAddressSearchBox/index.vue

@@ -1,262 +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 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 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",
  name: "mapAddressSearchBox",

    data () {
        return {
            searchExtensivelyValue: "",
            isShowClearBtn: false,
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            isClickValBox: false,
            pageIndex: 1,
            pageSize: 10,
            pages: 1
  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)
          })
        }
      })
    },

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

    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.$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.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,
                    },
                })
            }
      this.$EventBus.$emit("layerPointAdd", {
        layerName: "searchLayer",
        type: "billboard",
        params: {
          lng: `${lng}`,
          lat: `${lat}`,
          alt: 1,
          url: "/img/icon/location.png",
        },

        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)
    searchInputTree (newText) {
      this.searchExtensivelyArray = []

        this.$EventBus.$emit("mapRemoveLayer", {
      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;
  position: fixed;
  z-index: 9;
  left: 770px;
  top: 140px;
  width: 380px;
  height: 36px;
  display: flex;

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

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

        input {
            flex: 1;
            font-size: 14px;
        }
    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);
  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 {
    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/views/home/components/dialog/countByDetailsBox.vue

@@ -9,172 +9,275 @@
 * 2025-11-12 17:45:28
-->
<template>
    <el-dialog :title="landTitle" :visible.sync="landVisible" :before-close="landBeforeClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
        <div class="header">
            <div v-show="landType == 2">
                小区名称：
                <input type="text" v-model="landSearchAoiName" placeholder="请输入小区名称" />
            </div>
            <div v-show="landType == 1">
                责任区名称：
                <input type="text" v-model="landSearchAoiName" placeholder="请输入责任区名称" />
            </div>
            <div>
                包干民警：
                <input type="text" v-model="policeName" placeholder="请输入包干民警名称" />
            </div>
            <div>
                联系电话：
                <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
            </div>
            <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
        </div>
        <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
            <el-table :data="landDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <template slot="empty">
                    <div>{{ landEmptyText }}</div>
                </template>
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" label="责任区名称"
                    v-if="landType == 1"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="aoiName" label="小区名称"
                    v-if="landType == 2"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeName" label="包干民警"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
            </el-table>
  <el-dialog :title="landTitleName" :visible.sync="landVisible" :before-close="landBeforeClose" :modal="true"
    :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
    <div class="header">
      <!-- <div v-show="landType == 2">
        标准地址：
        <input type="text" v-model="address" placeholder="请输入标准地址" />
      </div> -->
      <!-- <div v-show="landType == 1">
        责任区名称：
        <input type="text" v-model="landSearchAoiName" placeholder="请输入责任区名称" />
      </div> -->
      <div>
        包干民警：
        <input type="text" v-model="policeName" placeholder="请输入包干民警名称" />
      </div>
      <div>
        联系电话：
        <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
    </div>
    <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
      <el-table :data="landDetailArr" style="width: 100%"
        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
        <template slot="empty">
          <div>{{ landEmptyText }}</div>
        </template>
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="community" label="村社区"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="address" label="标准地址"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeName" label="包干民警"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
      </el-table>

            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :total="landPage.total"
                    :page-size="landPage.pageSize" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
            </div>
        </div>
    </el-dialog>
      <div class="pages all-pagination-sty" ref="tablePagination">
        <el-pagination background layout="prev, pager, next, total" :total="landPage.total" :page-size="landPage.pageSize"
          :current-page="landPage.currentPage" @current-change="landHandleCurrentChange"></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getLandDetail } from "@/api/home/index.js"
import { getRealEstatePage, getRealEstatePageTwo } from "@/api/home/index.js"

export default {
    props: ['policeStaionID'],
  props: ['policeStaionID'],

    data () {
        return {
            curLoading: false,
            landEmptyText: '',
            landVisible: false,
            landTitle: '',
            landType: '',
            landDetailArr: [],
            callPhone: '',
            landPage: {
                total: 0,
                pageSize: 12,
                currentPage: 1
            },
            // 现有小区搜索条件-小区名称
            landSearchAoiName: '',
            policeName: '',
        }
  data () {
    return {
      curLoading: false,
      landEmptyText: '',
      landVisible: false,
      landTitle: '',
      landTitleName: '',
      landType: '',
      landDetailArr: [],
      callPhone: '',
      landPage: {
        total: 0,
        pageSize: 12,
        currentPage: 1
      },
      // 现有小区搜索条件-小区名称
      address: '',
      policeName: '',
      deptId: '',
      areaId: '',
      aoiId: '',
    }
  },

  methods: {
    /**
    * @description: 显示现有小区弹窗列表
    * @param {*} name
    * @param {*} type
    * @param {*} id
    * @return {*}
    */
    showcountBydetail (name, type, data, deptId, areaId, aoiId) {
      console.log('name-------------------', type, name)
      this.landVisible = true
      this.landTitle = type == 1 ? this.getType(name) : this.getTypes(name)
      this.landTitleName = ''
      this.landType = type
      this.landDetailId = data
      this.landPage.currentPage = 1
      this.deptId = deptId
      this.areaId = areaId
      this.aoiId = aoiId
      if (this.landType == 1) {
        this.getRealEstatePage(type, data, this.landPage.currentPage)
      } else {
        this.getRealEstatePageTwo(type, data, this.landPage.currentPage)
      }
    },

    methods: {
        /**
        * @description: 显示现有小区弹窗列表
        * @param {*} name
        * @param {*} type
        * @param {*} id
        * @return {*}
        */
        showcountBydetail (name, type, id) {
            this.landVisible = true
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.landPage.currentPage = 1
            this.getLandDetail(type, id, this.landPage.currentPage)
    getType (name) {
      let typeList = [
        {
          name: '户室地址',
          typeList: ['room']
        },

        /**
        * @description: 现有小区弹窗中搜索
        * @return {*}
        */
        searchLandDetail () {
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        {
          name: '楼栋地址',
          typeList: ['building']
        },


        clearLandDetailSearchValue () {
            this.policeName = ''
            this.callPhone = ''
            this.landSearchAoiName = ''
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage)
        {
          name: '院落地址',
          typeList: ['aoi']
        },

        /**
        * @description: 现有小区详情弹窗分页
        * @param {*} currentPage 当前页数
        * @return {*}
        */
        landHandleCurrentChange (currentPage) {
            this.landPage.currentPage = currentPage
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        {
          name: '沿街门牌地址',
          typeList: ['road_no', 'road', 'town', 'community']
        },


        getLandDetail (type, id, current, policeName = '', phone = '', aoiName = '') {
            this.curLoading = true
            this.landEmptyText = ''

            const name = type == 1 ? {
                name: aoiName
            } : {
                aoiName
            }

            getLandDetail({
                type,
                policeStationId: this.policeStaionID == '1123598813738675201' || this.policeStaionID == '' ? id : '',
                areaId: this.policeStaionID != '1123598813738675201' && this.policeStaionID != '' ? id : '',
                current,
                policeName,
                phone,
                ...name,
                size: this.landPage.pageSize
            }).then(res => {
                this.landDetailArr = []
                this.landPage.total = 0

                if (res.data.data.records.length > 0) {
                    this.landDetailArr = res.data.data.records
                    this.landPage.total = res.data.data.total
                    this.landEmptyText = ''
                } else {
                    this.landDetailArr = []
                    this.landPage.total = 0
                    this.landEmptyText = type == 1 ? '暂无小区数据' : '暂无责任区数据'
                }
                setTimeout(() => {
                    this.curLoading = false
                }, 500)
            })
        },

        landBeforeClose () {
            this.landVisible = false
        {
          name: '单元地址',
          typeList: ['unit']
        }
      ]
      // 获取类型
      return typeList.find(item => item.name === name).typeList
    },

    getTypes (name) {
      let typeList = [
        {
          name: '户室牌',
          typeList: ['room']
        },
        {
          name: '楼栋牌',
          typeList: ['building']
        },
        {
          name: '大门牌',
          typeList: ['aoi']
        },
        {
          name: '中门牌',
          typeList: ['road_no', 'road', 'town', 'community']
        },
        {
          name: '单元牌',
          typeList: ['unit']
        }
      ]
      // 获取类型
      return typeList.find(item => item.name === name).typeList
    },


    /**
    * @description: 现有小区弹窗中搜索
    * @return {*}
    */
    searchLandDetail () {
      this.landPage.currentPage = 1
      if (this.landType == 1) {
        this.getRealEstatePage(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.address)
      } else {
        this.getRealEstatePageTwo(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.address)
      }
    },


    clearLandDetailSearchValue () {
      this.policeName = ''
      this.callPhone = ''
      this.address = ''
      this.landPage.currentPage = 1
      if (this.landType == 1) {
        this.getRealEstatePage(this.landType, this.landDetailId, this.landPage.currentPage)
      } else {
        this.getRealEstatePageTwo(this.landType, this.landDetailId, this.landPage.currentPage)
      }
    },

    /**
    * @description: 现有小区详情弹窗分页
    * @param {*} currentPage 当前页数
    * @return {*}
    */
    landHandleCurrentChange (currentPage) {
      this.landPage.currentPage = currentPage
      if (this.landType == 1) {
        this.getRealEstatePage(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.address)
      } else {
        this.getRealEstatePageTwo(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.address)
      }
    },


    getRealEstatePage (type, id, current, policeName = '', phone = '', address = '') {
      this.curLoading = true
      this.landEmptyText = ''
      getRealEstatePage({
        type,
        policeStationId: this.deptId == '1123598813738675201' || this.deptId == '' ? this.deptId : '',
        areaId: this.areaId,
        aoiId: this.aoiId,
        typeList: this.landTitle,
        current,
        policeName,
        phone,
        address,
        size: this.landPage.pageSize
      }).then(res => {
        this.landDetailArr = []
        this.landPage.total = 0
        if (res.data.data.records.length > 0) {
          this.landDetailArr = res.data.data.records
          this.landPage.total = res.data.data.total
          this.landEmptyText = ''
        } else {
          this.landDetailArr = []
          this.landPage.total = 0
          this.landEmptyText = type == 1 ? '暂无小区数据' : '暂无责任区数据'
        }
        setTimeout(() => {
          this.curLoading = false
        }, 500)
      })
    },

    getRealEstatePageTwo (type, id, current, policeName = '', phone = '', address = '') {
      this.curLoading = true
      this.landEmptyText = ''
      getRealEstatePageTwo({
        type,
        policeStationId: this.deptId == '1123598813738675201' || this.deptId == '' ? this.deptId : '',
        areaId: this.areaId,
        aoiId: this.aoiId,
        typeList: this.landTitle,
        current,
        policeName,
        phone,
        address,
        size: this.landPage.pageSize
      }).then(res => {
        this.landDetailArr = []
        this.landPage.total = 0
        if (res.data.data.records.length > 0) {
          this.landDetailArr = res.data.data.records
          this.landPage.total = res.data.data.total
          this.landEmptyText = ''
        } else {
          this.landDetailArr = []
          this.landPage.total = 0
          this.landEmptyText = type == 1 ? '暂无小区数据' : '暂无责任区数据'
        }
        setTimeout(() => {
          this.curLoading = false
        }, 500)
      })
    },

    landBeforeClose () {
      this.landVisible = false
    }
  },
}
</script>


 src/views/home/components/rightContainer.vue

@@ -1,6 +1,6 @@
<template>
    <div class="container" ref="Container">
        <!-- <div class="case-box" ref="caseBox">
  <div class="container" ref="Container">
    <!-- <div class="case-box" ref="caseBox">
            <div class="box">
                <div class="title" ref="alertBoxTitle">
                    <div>值班信息(当日)</div>
@@ -48,7 +48,7 @@
            </svg>
        </div> -->

        <!-- <div class="alert-box" ref="alertBox ">
    <!-- <div class="alert-box" ref="alertBox ">
            <div class="box">
                <div class="title">
                    警情统计
@@ -88,7 +88,7 @@
            </svg>
        </div> -->

        <!-- <div class="alert-box" ref="alertBox">
    <!-- <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>电子沙盘</div>
                <div class="title-tab">
@@ -110,70 +110,66 @@
            </div>
        </div> -->

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <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 style="overflow: hidden" id="CountByTypeEcharts" class="echarts-box"></div>
                </el-main>
            </div>
    <div class="crowd-box" ref="crowdBox">
      <div class="box">
        <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 style="overflow: hidden" id="CountByTypeEcharts" class="echarts-box"></div>
        </el-main>
      </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
      <svg class="border-svg">
        <defs>
          <path id="border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
            d="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z" fill="transparent" />
                    <radialGradient id="border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
          <radialGradient id="border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#fff" stop-opacity="1" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          <mask id="border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c">
            <circle cx="0" cy="0" r="150" fill="url(#border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c)">
              <animateMotion dur="8s"
                path="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>
                rotate="auto" repeatCount="indefinite" />
            </circle>
          </mask>
        </defs>

                <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <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 style="overflow: hidden" id="CountByTypeMpEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
        </use>
      </svg>
    </div>

    <div class="crowd-box" ref="crowdBox">
      <div class="box">
        <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 style="overflow: hidden" id="CountByTypeMpEcharts" class="echarts-box"></div>
        </el-main>
      </div>

      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
        </use>
      </svg>
    </div>
  </div>
</template>

<script>
@@ -182,15 +178,15 @@
let countByTypeMyChart, countByTypeMpMyChart
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
  "#5470FE",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
]

let rightTiming = null
@@ -201,9 +197,9 @@

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

@@ -212,1095 +208,1101 @@
const timeEvents = []

export default {
    inject: ["userInfo"],
    data () {
        return {
            addresCount: '',
            zpCount: '',
            eventTime: [],
            CountByTypeEchartsLoading: false,
            CountByTypeMpEchartsLoading: false,
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
  inject: ["userInfo"],
  data () {
    return {
      addresCount: '',
      zpCount: '',
      eventTime: [],
      CountByTypeEchartsLoading: false,
      CountByTypeMpEchartsLoading: false,
      equipmentEchartsLoading: false,
      eventChangeEchartsLoading: false,
      schedulingNoDataText: ' ',
      schedulingLoading: false,

            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近两周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }]
            },
            regionTotal: 0,
            linetype: 0,
            tableHeight: 0,
            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' },],
            caseInfoType: 0
        }
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近两周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      regionTotal: 0,
      linetype: 0,
      tableHeight: 0,
      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' },],
      caseInfoType: 0
    }
  },

  created () {
    this.pickerOptions = {
      ...this.pickerOptions,
      disabledDate (time) {
        // 设置可选择的日期为今天之后的一个月内
        let curDate = new Date().getTime()
        return time.getTime() > curDate
      },
    }

    this.defaultDate()
  },

  mounted () {
    this.getHomeAllData()

    this.$nextTick(() => {
      window.addEventListener("resize", this.echartsResize)
      this.tableHeight =
        this.$refs.Container.offsetHeight -
        this.$refs.caseBox.offsetHeight -
        this.$refs.crowdBox.offsetHeight -
        this.$refs.alertBoxTitle.offsetHeight -
        55
    })
  },

  methods: {
    //获取值班列表信息
    getSchedlingList (item) {
      this.$emit("showschedulingdetail", item.dept, item.dept, "type")
    },

    created () {
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = new Date().getTime()
                return time.getTime() > curDate
            },
        }

        this.defaultDate()
    //获取值班单位信息
    getSchedulingDeptList () {
      getSchedulingDeptList().then((res) => {
        this.schedulingDeptList = res.data.data
      })
    },

    mounted () {
        this.getHomeAllData()
    // actTabClick (type) {
    //     this.acttype = type
    //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
    //     this.$emit('changeActivityType', type)
    //     this.$emit('activityChange')
    // },

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight =
                this.$refs.Container.offsetHeight -
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                55
    /**
     * @description: 获取当前组件内所有数据
     * @return {*}
     */
    getHomeAllData (deptId = "", areaId = '', aoiId = '') {
      console.log("26666666666666", deptId, areaId, aoiId)
      this.policeStaionID = deptId
      this.aoiId = aoiId
      this.areaId = areaId

      this.getCountByType()

      this.getCountByTypeMp()

      if (rightTiming != null) {
        clearInterval(rightTiming)
        rightTiming = null
      }

      rightTiming = setInterval(async () => {
        this.getCountByType()

        this.getCountByTypeMp()
      }, 600000)
    },

    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 = [
          {
            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), 1)
      })
    },

    methods: {
        //获取值班列表信息
        getSchedlingList (item) {
            this.$emit("showschedulingdetail", item.dept, item.dept, "type")
        },
    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',
            value: 0,
            name: '单元牌'
          },
          {
            type: 'road_no',
            value: 0,
            name: '中门牌'
          },
          {
            type: 'aoi',
            value: 0,
            name: '大门牌'
          },
          {
            type: 'room',
            value: 0,
            name: '户室牌'
          },
          {
            type: 'building',
            value: 0,
            name: '楼栋牌'
          },
        ]

        //获取值班单位信息
        getSchedulingDeptList () {
            getSchedulingDeptList().then((res) => {
                this.schedulingDeptList = res.data.data
            })
        },

        // actTabClick (type) {
        //     this.acttype = type
        //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

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

            this.getCountByType()

            this.getCountByTypeMp()

            if (rightTiming != null) {
                clearInterval(rightTiming)
                rightTiming = null
        data.forEach(item => {
          echartsData.forEach(i => {
            if (item.type === i.type) {
              i.value = item.count
            }
          })
        })

            rightTiming = setInterval(async () => {
                this.getCountByType()
        this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData, 2)
      })
    },

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

        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
                })
        countByTypeMyChart = this.$echarts.init(chartDom)
        countByTypeMyChart.setOption(this.initCountyByOptions(xDate, yDate))

                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: '楼栋地址'
                    },
                ]
        countByTypeMyChart.on('click', params => {
          console.log('params------1111----------', params)
          this.$emit('showcountBydetail', params.name, 1, params.data, this.policeStaionID, this.areaId, this.aoiId)
          // if (this.tabTypeThree == 0) {
          //     this.$emit('showcountBydetail', params.name, 2, params.data.id)
          // } else {
          //     this.$emit('showcountBydetail', params.name, 1, params.data.id)
          // }
        })

                data.forEach(item => {
                    echartsData.forEach(i => {
                        if (item.type === i.type) {
                            i.num = item.count
                        }
                    })
                })
        this.CountByTypeEchartsLoading = false
      } else {
        var chartMpDom = document.getElementById('CountByTypeMpEcharts')

                this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 1)
            })
        },
        countByTypeMpMyChart = this.$echarts.init(chartMpDom)
        countByTypeMpMyChart.setOption(this.initCountyByOptions(xDate, yDate, '#3498db'))

        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',
                        value: 0,
                        name: '单元牌'
                    },
                    {
                        type: 'road_no',
                        value: 0,
                        name: '中门牌'
                    },
                    {
                        type: 'aoi',
                        value: 0,
                        name: '大门牌'
                    },
                    {
                        type: 'room',
                        value: 0,
                        name: '户室牌'
                    },
                    {
                        type: 'building',
                        value: 0,
                        name: '楼栋牌'
                    },
                ]
        countByTypeMpMyChart.on('click', params => {
          // this.policeStaionID = deptId
          // this.aoiId = aoiId
          console.log('params----------------', params)
          this.$emit('showcountBydetail', params.name, 2, params.data, this.policeStaionID, this.areaId, this.aoiId)
          // if (this.tabTypeThree == 0) {
          //     this.$emit('showcountBydetail', params.name, 2, params.data.id)
          // } else {
          //     this.$emit('showcountBydetail', params.name, 1, params.data.id)
          // }
        })

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

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

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

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

                countByTypeMyChart.on('click', params => {
                    if (this.tabTypeThree == 0) {
                        this.$emit('showcountBydetail', params.name, 2, params.data.id)
                    } else {
                        this.$emit('showcountBydetail', params.name, 1, params.data.id)
                    }
                })

                this.CountByTypeEchartsLoading = false
    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 {
                var chartMpDom = document.getElementById('CountByTypeMpEcharts')

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

                countByTypeMpMyChart.on('click', params => {
                    if (this.tabTypeThree == 0) {
                        this.$emit('showcountBydetail', params.name, 2, params.data.id)
                    } else {
                        this.$emit('showcountBydetail', params.name, 1, params.data.id)
                    }
                })

                this.CountByTypeMpEchartsLoading = false
              msg = params.value
            }
        },

        initCountyByOptions (xDate, yDate, color = '#2ecc71') {
            const that = this
            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)
          }
        },
        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')
      }
    },

    echartsResize () {
      equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
      eventchangemychart &&
        eventchangemychart != null &&
        eventchangemychart.resize()
    },

    // 警情统计中时间变化
    async caseTimeChange (e) {
      const date = e.map((item) => {
        return this.dateFormat(item)
      })

      eventchangemychart.clear()

      if (this.caseInfoType == 0) {
        this.getCaseAll(date[0], date[1])
      } else if (this.caseInfoType == 1) {
        this.getCaseRanking(date[0], date[1])
      } else {
        this.getCaseRankingArea(date[0], date[1])
      }
    },

    // 设置默认时间
    defaultDate () {
      var current = new Date()

      var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

      this.eventTime = [seven, current] //将值设置给插件绑定的数据
    },

    // 获取当前日期
    dateFormat (dateData) {
      var date = new Date(dateData)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? "0" + m : m
      var d = date.getDate()
      d = d < 10 ? "0" + d : d
      const time = y + "-" + m + "-" + d
      return time
    },

    // 获取警情统计值
    getCaseAll (start, end) {
      getCaseAll(
        start,
        end,
        this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
      ).then((res) => {
        let obj = {}
        if (res.data.timeList) {
          let yDataList = {}
          yDataList.dqList = res.data.dqList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.zpList = res.data.zpList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.jfList = res.data.jfList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.qtList = res.data.qtList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.qjList = res.data.qjList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.sdList = res.data.sdList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.sduList = res.data.sduList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          yDataList.shList = res.data.shList.reduce(
            (previous, current) => {
              previous.push(current.count)
              return previous
            },
            []
          )
          let xData = res.data.timeList.map(item => item.slice(5, 10))
          obj = { xData, yDataList }
        } else {
          obj = { xData: [], yDataList: {} }
        }

        eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

        setTimeout(() => {
          this.eventChangeEchartsLoading = false
        }, 500)
      })
    },

    // 获取警情社区排行统计值
    getCaseRanking (start, end) {
      getCaseRanking(
        start,
        end,
        this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
      ).then((res) => {
        let data = []

        if (res.data.data) {
          res.data.data = res.data.data.sort((a, b) => b.value - a.value)
          res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
            item.value = item.count

            if (index == 0) {
              item.itemStyle = {
                color: '#EB3C5A'
              }
            } else if (index == 1) {
              item.itemStyle = {
                color: '#FA8331'
              }
            } else if (index == 2) {
              item.itemStyle = {
                color: '#F7B833'
              }
            } else {
              item.itemStyle = {
                color: '#395FFD'
              }
            }

            return item
          }).sort((a, b) => b.value - a.value)

          data = res.data.data
        } else {
          data = []
        }

        eventchangemychart.setOption(this.initRankingOption(data))

        setTimeout(() => {
          this.eventChangeEchartsLoading = false
        }, 500)
      })
    },

    // 获取警情辖区排行统计值
    getCaseRankingArea (start, end) {
      getCaseRankingArea(
        start,
        end,
        this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
      ).then((res) => {
        let data = []
        if (res.data.data) {
          res.data.data = res.data.data.sort((a, b) => b.num - a.num)
          res.data.data = res.data.data.filter((item) => {
            return 'num' in item && 'name' in item
          }).filter((item, index) => index < 8).map((item, index) => {
            item.value = item.num

            if (index == 0) {
              item.itemStyle = {
                color: '#EB3C5A'
              }
            } else if (index == 1) {
              item.itemStyle = {
                color: '#FA8331'
              }
            } else if (index == 2) {
              item.itemStyle = {
                color: '#F7B833'
              }
            } else {
              item.itemStyle = {
                color: '#395FFD'
              }
            }

            return item
          })

          data = res.data.data
        } else {
          data = []
        }

        eventchangemychart.setOption(this.initRankingOption(data))

        setTimeout(() => {
          this.eventChangeEchartsLoading = false
        }, 500)
      })
    },

    // 初始化警情数量统计
    async initEventChangeEcharts (type) {
      this.caseInfoType = type
      this.eventChangeEchartsLoading = true

      if (
        eventchangemychart != null &&
        eventchangemychart != "" &&
        eventchangemychart != undefined
      ) {

        eventchangemychart.clear()
        eventchangemychart.dispose()

      }

      var chartDom = document.getElementById("EventChangeEcharts")
      eventchangemychart = this.$echarts.init(chartDom)

      const date = this.eventTime.map((item) => {
        return this.dateFormat(item)
      })

      if (type == 0) {
        this.getCaseAll(date[0], date[1])
      } else if (type == 1) {
        this.getCaseRanking(date[0], date[1])
      } else {
        this.getCaseRankingArea(date[0], date[1])
      }
    },

    // 警情数量统计的options
    initEventChangeOption (xData, yDataList) {
      let option
      if (xData.length == 0) {
        //暂无数据
        option = {
          title: {
            text: "暂无警情数据",
            x: "center",
            y: "center",
            textStyle: {
              color: "#fff",
              fontSize: fontSize(14),
              fontWeight: "normal",
            },
          },
        }
      } else {
        option = {
          color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
          tooltip: {
            trigger: "item",
            formatter:
              ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
          },
          xAxis: {
            type: "category",
            data: xData,
            axisLabel: {
              color: "#fff",
              fontSize: fontSize(14),
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
          legend: {
            data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
            textStyle: {
              color: "#fff"
            }
          },
          yAxis: {
            type: "value",

            minInterval: 1,

            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              fontSize: fontSize(14),
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
          series: [
            {
              name: '盗窃',
              data: yDataList.dqList,
              type: "line",
              smooth: true,
              // areaStyle: {
              //     normal: {
              //         //渐变色
              //         color: new this.$echarts.graphic.LinearGradient(
              //             0,
              //             0,
              //             0,
              //             1,
              //             [
              //                 {
              //                     //波形图渐变色样式
              //                     offset: 0,
              //                     color: "rgba(3, 108, 255, 0.7)",
              //                 },
              //                 {
              //                     offset: 0.8,
              //                     color: "rgba(3, 108, 255, 0.1)",
              //                 },
              //             ],
              //             false
              //         ),
              //     },
              // },
              // itemStyle: {
              //     normal: {
              //         color: "red", //改变折线点的颜色
              //         lineStyle: {
              //             color: "rgba(3, 108, 255, 1)", //改变折线颜色
              //         },
              //     },
              // },
            },
            {
              name: '涉诈',
              data: yDataList.zpList,
              type: "line",
              smooth: true,
            },
            {
              name: '纠纷',
              data: yDataList.jfList,
              type: "line",
              smooth: true,
            },
            {
              name: '其他',
              data: yDataList.qtList,
              type: "line",
              smooth: true,
            },
            {
              name: '求助',
              data: yDataList.qjList,
              type: "line",
              smooth: true,
            },
            {
              name: '涉毒',
              data: yDataList.sduList,
              type: "line",
              smooth: true,
            },
            {
              name: '涉赌',
              data: yDataList.sdList,
              type: "line",
              smooth: true,
            },
            {
              name: '涉黄',
              data: yDataList.shList,
              type: "line",
              smooth: true,
            }

          ],
          grid: {
            top: "24%",
            left: "3%",
            right: "2%",
            bottom: "4%",
            containLabel: true,
          },
        }
      }

      return option
    },

    // 警情排行统计的options
    initRankingOption (dataArr) {
      let option
      if (dataArr.length == 0) {
        //暂无数据
        option = {
          title: {
            text: "暂无警情排行数据",
            x: "center",
            y: "center",
            textStyle: {
              color: "#fff",
              fontSize: fontSize(14),
              fontWeight: "normal",
            },
          },
        }
      } else {
        let seriesData = dataArr.map(item => {
          return { value: item.value, itemStyle: item.itemStyle }
        })
        let xData = dataArr.map((item) => {
          if (item.name.length > 5) {
            let name = item.name.substring(0, 6) + '…'

            return name
          } else {
            return item.name
          }
        })
        option = {
          tooltip: {
            trigger: "item",
            confine: true,
            formatter:
              ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
          },
          xAxis: {
            type: "value",
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              axisLine: { show: false },
              axisTick: { show: false },
              data: dataArr.map(item => item.name),
              axisLabel: {
                rich: {
                  nt1: {
                    color: "#fff",
                    backgroundColor: '#EB3B5A',
                    width: fontSize(12),
                    height: fontSize(12),
                    fontSize: fontSize(10),
                    align: "center",
                    borderRadius: fontSize(50),
                    padding: [0, 1, 2, 1]
                  },
                  nt2: {
                    color: "#fff",
                    backgroundColor: '#FA8231',
                    width: fontSize(12),
                    height: fontSize(12),
                    fontSize: fontSize(10),
                    align: "center",
                    borderRadius: fontSize(50),
                    padding: [0, 1, 2, 1]
                  },
                  nt3: {
                    color: "#fff",
                    backgroundColor: '#F7B731',
                    width: fontSize(12),
                    height: fontSize(12),
                    fontSize: fontSize(10),
                    align: "center",
                    borderRadius: fontSize(50),
                    padding: [0, 1, 2, 1]
                  },
                  nt: {
                    color: "#fff",
                    backgroundColor: '#00a9c8',
                    width: fontSize(12),
                    height: fontSize(12),
                    fontSize: fontSize(10),
                    align: "center",
                    borderRadius: fontSize(50),
                    padding: [0, 1, 2, 1]
                  }
                },
                formatter: function (value, index) {
                  let idx = index + 1
                  if (idx <= 3) {
                    return ["{nt" + idx + "|" + idx + "}"].join("\n")
                  } else {
                    return ["{nt|" + idx + "}"].join("\n")
                  }
                }
              }
            },
            {//名称
              type: 'category',
              offset: -10,
              position: "left",
              axisLine: { show: false },
              axisTick: { show: false },
              axisLabel: {
                color: '#fff',
                align: "left",
                verticalAlign: "bottom",
                lineHeight: fontSize(24),
                fontSize: fontSize(10)
              },
              data: xData.reverse(),
            },
          ],
          series: [
            {
              zlevel: 1,
              type: "bar",
              barWidth: fontSize(10),
              data: seriesData,
              itemStyle: {
                normal: {
                  barBorderRadius: fontSize(5)
                }
              },
              label: {
                show: true,
                fontSize: fontSize(10),
                color: "#fff"
              }
            }
          ],
          grid: {
            top: "3%",
            left: "-14%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          }
        }
      }

      return option
    },

    // 现有设备统计
    getEquipment () {
      const typeData = {
        carCount: "警车",
        monitorCount: "摄像头",
        phoneCount: "执法记录仪",
        recorderCount: "手台",
      }

      const typeIndexData = {
        警车: 0,
        摄像头: 1,
        手台: 2,
        执法记录仪: 3,
      }

      let data = []
      this.regionTotal = 0
      let dataAll = null
      dataAll = getEquipment(
        this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
      ).then((res) => {
        if (this.linetype == 0) {
          data = res.data.map((item, index) => {
            this.regionTotal += item.count

            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2)
                        } else {
                            msg = params.value
                        }

                        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)
                    }
                },
                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
                }
              equimentType: typeIndexData[item.type],
              name: item.type,
              value: Number(item.count),
              working: Number(item.online),
              fault: Number(item.offline),
              label: twoColor[index],
            }
        },
          })

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

          return data
        } else {
          let normalData = {
            value: 0,
            name: "在线",
            color: "#4caf50",
            online: true,
            label: { color: oneColor[0] },
          }
          let faultData = {
            value: 0,
            name: "离线",
            color: "#ffd600",
            online: false,
            label: { color: oneColor[2] },
          }

          res.data.forEach((item) => {
            this.regionTotal = Number(this.regionTotal) + Number(item.count)

            normalData.value = Number(normalData.value) + Number(item.online)

            for (let key in typeData) {
              if (item.type == typeData[key]) {
                normalData[key] = Number(item.online)
                faultData[key] = Number(item.offline)
              }
            }

            if (countByTypeMpMyChart != null && countByTypeMpMyChart != '' && countByTypeMpMyChart != undefined) {
                countByTypeMpMyChart.clear()
                countByTypeMpMyChart.dispose()
                countByTypeMpMyChart.off('click')
            }
        },
            faultData.value = Number(faultData.value) + Number(item.offline)
          })

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart &&
                eventchangemychart != null &&
                eventchangemychart.resize()
        },
          data = [normalData, faultData]

        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })
          equimentDataLength = data.length

            eventchangemychart.clear()
          return data
        }
      }).catch(res => {
        dataAll = '请求错误'
      })

            if (this.caseInfoType == 0) {
                this.getCaseAll(date[0], date[1])
            } else if (this.caseInfoType == 1) {
                this.getCaseRanking(date[0], date[1])
            } else {
                this.getCaseRankingArea(date[0], date[1])
            }
        },
      return dataAll
    },

        // 设置默认时间
        defaultDate () {
            var current = new Date()
    // 现有设备饼图初始化
    async initEquipmentEcharts (type) {
      this.linetype = type
      this.equipmentEchartsLoading = true

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
      if (
        equipmentmyChart != null &&
        equipmentmyChart != "" &&
        equipmentmyChart != undefined
      ) {
        equipmentmyChart.dispose()
        equipmentmyChart.off("click")
      }

            this.eventTime = [seven, current] //将值设置给插件绑定的数据
        },
      var chartDom = document.getElementById("EquipmentEcharts")
      equipmentmyChart = this.$echarts.init(chartDom)

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },
      const data = await this.getEquipment()

        // 获取警情统计值
        getCaseAll (start, end) {
            getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let obj = {}
                if (res.data.timeList) {
                    let yDataList = {}
                    yDataList.dqList = res.data.dqList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.zpList = res.data.zpList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.jfList = res.data.jfList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qtList = res.data.qtList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qjList = res.data.qjList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sdList = res.data.sdList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sduList = res.data.sduList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.shList = res.data.shList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    let xData = res.data.timeList.map(item => item.slice(5, 10))
                    obj = { xData, yDataList }
                } else {
                    obj = { xData: [], yDataList: {} }
                }
      if (data == '请求错误') {
        setTimeout(() => {
          this.equipmentEchartsLoading = false
        }, 500)
      }
      const newData = data.filter((item) => {
        if (item.value != 0) {
          return item
        }
      })

                eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))
      equipmentmyChart.setOption(this.initEquipmentOptions(newData))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },
      this.clickEquimentChart()

        // 获取警情社区排行统计值
        getCaseRanking (start, end) {
            getCaseRanking(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let data = []
      if (newData.length > 1) {
        this.equipmentEchartsCarousel()
      } else {
        clearInterval(timer)
        equipmentmyChart.off("mouseover")
        equipmentmyChart.off("mouseout")
      }
      setTimeout(() => {
        this.equipmentEchartsLoading = false
      }, 500)
    },

                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => b.value - a.value)
                    res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
                        item.value = item.count

                        if (index == 0) {
                            item.itemStyle = {
                                color: '#EB3C5A'
                            }
                        } else if (index == 1) {
                            item.itemStyle = {
                                color: '#FA8331'
                            }
                        } else if (index == 2) {
                            item.itemStyle = {
                                color: '#F7B833'
                            }
                        } else {
                            item.itemStyle = {
                                color: '#395FFD'
                            }
                        }

                        return item
                    }).sort((a, b) => b.value - a.value)

                    data = res.data.data
                } else {
                    data = []
                }

                eventchangemychart.setOption(this.initRankingOption(data))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 获取警情辖区排行统计值
        getCaseRankingArea (start, end) {
            getCaseRankingArea(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let data = []
                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => b.num - a.num)
                    res.data.data = res.data.data.filter((item) => {
                        return 'num' in item && 'name' in item
                    }).filter((item, index) => index < 8).map((item, index) => {
                        item.value = item.num

                        if (index == 0) {
                            item.itemStyle = {
                                color: '#EB3C5A'
                            }
                        } else if (index == 1) {
                            item.itemStyle = {
                                color: '#FA8331'
                            }
                        } else if (index == 2) {
                            item.itemStyle = {
                                color: '#F7B833'
                            }
                        } else {
                            item.itemStyle = {
                                color: '#395FFD'
                            }
                        }

                        return item
                    })

                    data = res.data.data
                } else {
                    data = []
                }

                eventchangemychart.setOption(this.initRankingOption(data))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 初始化警情数量统计
        async initEventChangeEcharts (type) {
            this.caseInfoType = type
            this.eventChangeEchartsLoading = true
    // 现有设备options饼图数据
    initEquipmentOptions (dataArr) {
      return {
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: function (params) {
            let tipHtml = ``

            if (
                eventchangemychart != null &&
                eventchangemychart != "" &&
                eventchangemychart != undefined
              "carCount" in params.data ||
              "monitorCount" in params.data ||
              "phoneCount" in params.data ||
              "recorderCount" in params.data
            ) {

                eventchangemychart.clear()
                eventchangemychart.dispose()

            }

            var chartDom = document.getElementById("EventChangeEcharts")
            eventchangemychart = this.$echarts.init(chartDom)

            const date = this.eventTime.map((item) => {
                return this.dateFormat(item)
            })

            if (type == 0) {
                this.getCaseAll(date[0], date[1])
            } else if (type == 1) {
                this.getCaseRanking(date[0], date[1])
            } else {
                this.getCaseRankingArea(date[0], date[1])
            }
        },

        // 警情数量统计的options
        initEventChangeOption (xData, yDataList) {
            let option
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                option = {
                    color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
                    tooltip: {
                        trigger: "item",
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    legend: {
                        data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    yAxis: {
                        type: "value",

                        minInterval: 1,

                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            name: '盗窃',
                            data: yDataList.dqList,
                            type: "line",
                            smooth: true,
                            // areaStyle: {
                            //     normal: {
                            //         //渐变色
                            //         color: new this.$echarts.graphic.LinearGradient(
                            //             0,
                            //             0,
                            //             0,
                            //             1,
                            //             [
                            //                 {
                            //                     //波形图渐变色样式
                            //                     offset: 0,
                            //                     color: "rgba(3, 108, 255, 0.7)",
                            //                 },
                            //                 {
                            //                     offset: 0.8,
                            //                     color: "rgba(3, 108, 255, 0.1)",
                            //                 },
                            //             ],
                            //             false
                            //         ),
                            //     },
                            // },
                            // itemStyle: {
                            //     normal: {
                            //         color: "red", //改变折线点的颜色
                            //         lineStyle: {
                            //             color: "rgba(3, 108, 255, 1)", //改变折线颜色
                            //         },
                            //     },
                            // },
                        },
                        {
                            name: '涉诈',
                            data: yDataList.zpList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '纠纷',
                            data: yDataList.jfList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '其他',
                            data: yDataList.qtList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '求助',
                            data: yDataList.qjList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉毒',
                            data: yDataList.sduList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉赌',
                            data: yDataList.sdList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉黄',
                            data: yDataList.shList,
                            type: "line",
                            smooth: true,
                        }

                    ],
                    grid: {
                        top: "24%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
                        containLabel: true,
                    },
                }
            }

            return option
        },

        // 警情排行统计的options
        initRankingOption (dataArr) {
            let option
            if (dataArr.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情排行数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                let seriesData = dataArr.map(item => {
                    return { value: item.value, itemStyle: item.itemStyle }
                })
                let xData = dataArr.map((item) => {
                    if (item.name.length > 5) {
                        let name = item.name.substring(0, 6) + '…'

                        return name
                    } else {
                        return item.name
                    }
                })
                option = {
                    tooltip: {
                        trigger: "item",
                        confine: true,
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "value",
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            data: dataArr.map(item => item.name),
                            axisLabel: {
                                rich: {
                                    nt1: {
                                        color: "#fff",
                                        backgroundColor: '#EB3B5A',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt2: {
                                        color: "#fff",
                                        backgroundColor: '#FA8231',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt3: {
                                        color: "#fff",
                                        backgroundColor: '#F7B731',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt: {
                                        color: "#fff",
                                        backgroundColor: '#00a9c8',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    }
                                },
                                formatter: function (value, index) {
                                    let idx = index + 1
                                    if (idx <= 3) {
                                        return ["{nt" + idx + "|" + idx + "}"].join("\n")
                                    } else {
                                        return ["{nt|" + idx + "}"].join("\n")
                                    }
                                }
                            }
                        },
                        {//名称
                            type: 'category',
                            offset: -10,
                            position: "left",
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: {
                                color: '#fff',
                                align: "left",
                                verticalAlign: "bottom",
                                lineHeight: fontSize(24),
                                fontSize: fontSize(10)
                            },
                            data: xData.reverse(),
                        },
                    ],
                    series: [
                        {
                            zlevel: 1,
                            type: "bar",
                            barWidth: fontSize(10),
                            data: seriesData,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: fontSize(5)
                                }
                            },
                            label: {
                                show: true,
                                fontSize: fontSize(10),
                                color: "#fff"
                            }
                        }
                    ],
                    grid: {
                        top: "3%",
                        left: "-14%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
                    }
                }
            }

            return option
        },

        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: "警车",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }

            const typeIndexData = {
                警车: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
            }

            let data = []
            this.regionTotal = 0
            let dataAll = null
            dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {
                        this.regionTotal += item.count

                        return {
                            equimentType: typeIndexData[item.type],
                            name: item.type,
                            value: Number(item.count),
                            working: Number(item.online),
                            fault: Number(item.offline),
                            label: twoColor[index],
                        }
                    })

                    equimentDataLength = data.length

                    return data
                } else {
                    let normalData = {
                        value: 0,
                        name: "在线",
                        color: "#4caf50",
                        online: true,
                        label: { color: oneColor[0] },
                    }
                    let faultData = {
                        value: 0,
                        name: "离线",
                        color: "#ffd600",
                        online: false,
                        label: { color: oneColor[2] },
                    }

                    res.data.forEach((item) => {
                        this.regionTotal = Number(this.regionTotal) + Number(item.count)

                        normalData.value = Number(normalData.value) + Number(item.online)

                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = Number(item.online)
                                faultData[key] = Number(item.offline)
                            }
                        }

                        faultData.value = Number(faultData.value) + Number(item.offline)
                    })

                    data = [normalData, faultData]

                    equimentDataLength = data.length

                    return data
                }
            }).catch(res => {
                dataAll = '请求错误'
            })

            return dataAll
        },

        // 现有设备饼图初始化
        async initEquipmentEcharts (type) {
            this.linetype = type
            this.equipmentEchartsLoading = true

            if (
                equipmentmyChart != null &&
                equipmentmyChart != "" &&
                equipmentmyChart != undefined
            ) {
                equipmentmyChart.dispose()
                equipmentmyChart.off("click")
            }

            var chartDom = document.getElementById("EquipmentEcharts")
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            if (data == '请求错误') {
                setTimeout(() => {
                    this.equipmentEchartsLoading = false
                }, 500)
            }
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
            })

            equipmentmyChart.setOption(this.initEquipmentOptions(newData))

            this.clickEquimentChart()

            if (newData.length > 1) {
                this.equipmentEchartsCarousel()
            } else {
                clearInterval(timer)
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.equipmentEchartsLoading = false
            }, 500)
        },

        // 现有设备options饼图数据
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: "item",
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if (
                            "carCount" in params.data ||
                            "monitorCount" in params.data ||
                            "phoneCount" in params.data ||
                            "recorderCount" in params.data
                        ) {
                            tipHtml = `
              tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
                            <br />
@@ -1314,484 +1316,484 @@
                            <br />
                            <span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
                            `
                        } else {
                            tipHtml = `${params.marker} 
            } else {
              tipHtml = `${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name
                                } ${params.data.value}台</strong>
                } ${params.data.value}台</strong>
                            <br />
                            <span style="color:#4caf50">在线：${params.data.working
                                }台</span>
                }台</span>
                            <br />
                            <span style="color:#ccc">离线：${params.data.fault
                                }台</span>
                }台</span>
                            <br />
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
                                    (params.data.fault /
                                        (params.data.working + params.data.fault)) *
                                    100
                                )}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: "rgba(8, 56, 185, 0.9)",
                    borderColor: "rgba(8, 56, 185, 0.9)",
                    textStyle: {
                        fontSize: fontSize(14),
                    },
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700,
                    },
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center",
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["90%", "136%"],
                        top: "middle",
                        left: "center",
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3),
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                color: "red",
                                fontSize: fontSize(16),
                            },
                        },
                        label: {
                            formatter: '{b} {c}',
                            color: function (params) {
                                let colorList = []
                                if ("carCount" in params.data) {
                                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                } else {
                                    colorList = [
                                        "#5470FE",
                                        "#91cc75",
                                        "#fac858",
                                        "#ee6666",
                                        "#73c0de",
                                        "#3ba272",
                                        "#fc8452",
                                        "#9a60b4",
                                        "#ea7ccc",
                                    ]
                                }
                                return colorList[params.dataIndex]
                            },
                            fontSize: fontSize(16),
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ("carCount" in params.data) {
                                        colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                    } else {
                                        colorList = [
                                            "#5470FE",
                                            "#91cc75",
                                            "#fac858",
                                            "#ee6666",
                                            "#73c0de",
                                            "#3ba272",
                                            "#fc8452",
                                            "#9a60b4",
                                            "#ea7ccc",
                                        ]
                                    }
                                    return colorList[params.dataIndex]
                                },
                            },
                        },
                    },
                ],
                  (params.data.fault /
                    (params.data.working + params.data.fault)) *
                  100
                )}%</span><br />`
            }
            return tipHtml
          },
          backgroundColor: "rgba(8, 56, 185, 0.9)",
          borderColor: "rgba(8, 56, 185, 0.9)",
          textStyle: {
            fontSize: fontSize(14),
          },
        },

        // 设备饼图轮播
        equipmentEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % equimentDataLength
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            equipmentmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % equimentDataLength
                    equipmentmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        graphic: {
          type: "text",
          // left: "36.5%",
          top: "40%",
          left: "center",
          style: {
            text: "设备总数",
            textAlign: "center",
            fill: "#fff",
            fontSize: fontSize(18),
            fontWeight: 700,
          },
        },

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on("click", (params) => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if ("equimentType" in params.data) {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.equimentType,
                        "type"
                    )
        title: {
          text: `${this.regionTotal}`,
          top: "52%",
          left: "center",
          textStyle: {
            color: "#27D9C8",
            fontSize: fontSize(20),
            fontWeight: 700,
            align: "center",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["90%", "136%"],
            top: "middle",
            left: "center",
            data: dataArr,
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                length: fontSize(15),
                lineStyle: {
                  width: fontSize(3),
                },
              },
            },
            emphasis: {
              label: {
                color: "red",
                fontSize: fontSize(16),
              },
            },
            label: {
              formatter: '{b} {c}',
              color: function (params) {
                let colorList = []
                if ("carCount" in params.data) {
                  colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                } else {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.online,
                        "online"
                    )
                  colorList = [
                    "#5470FE",
                    "#91cc75",
                    "#fac858",
                    "#ee6666",
                    "#73c0de",
                    "#3ba272",
                    "#fc8452",
                    "#9a60b4",
                    "#ea7ccc",
                  ]
                }
            })
        },
                return colorList[params.dataIndex]
              },
              fontSize: fontSize(16),
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = []
                  if ("carCount" in params.data) {
                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                  } else {
                    colorList = [
                      "#5470FE",
                      "#91cc75",
                      "#fac858",
                      "#ee6666",
                      "#73c0de",
                      "#3ba272",
                      "#fc8452",
                      "#9a60b4",
                      "#ea7ccc",
                    ]
                  }
                  return colorList[params.dataIndex]
                },
              },
            },
          },
        ],
      }
    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)
        this.disposeEchart()
    // 设备饼图轮播
    equipmentEchartsCarousel () {
      let curIndex = 0
      if (timer) {
        clearInterval(timer)
      }

        if (equipmentmyChart) {
            equipmentmyChart.dispose()
            equipmentmyChart = null
        }
      timer = setInterval(() => {
        equipmentmyChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        curIndex = (curIndex + 1) % equimentDataLength
        equipmentmyChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
      }, 1000)

        if (eventchangemychart) {
            eventchangemychart.dispose()
            eventchangemychart = null
        }
      equipmentmyChart.on("mouseover", function (param) {
        clearInterval(timer)
        equipmentmyChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        equipmentmyChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        })
        curIndex = param.dataIndex
      })

      equipmentmyChart.on("mouseout", function (param) {
        curIndex = param.dataIndex
        if (timer) {
            clearInterval(timer)
            timer = null
          clearInterval(timer)
        }

        if (rightTiming != null) {
            clearInterval(rightTiming)
            rightTiming = null
        }
        timer = setInterval(() => {
          equipmentmyChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: curIndex,
          })
          curIndex = (curIndex + 1) % equimentDataLength
          equipmentmyChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: curIndex,
          })
        }, 1000)
      })
    },

    // 现有设备的点击事件（显示弹窗表格）
    clickEquimentChart () {
      equipmentmyChart.on("click", (params) => {
        // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
        if ("equimentType" in params.data) {
          this.$emit(
            "showequimentdetail",
            params.data.name,
            params.data.equimentType,
            "type"
          )
        } else {
          this.$emit(
            "showequimentdetail",
            params.data.name,
            params.data.online,
            "online"
          )
        }
      })
    },
  },

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

    if (equipmentmyChart) {
      equipmentmyChart.dispose()
      equipmentmyChart = null
    }

    if (eventchangemychart) {
      eventchangemychart.dispose()
      eventchangemychart = null
    }

    if (timer) {
      clearInterval(timer)
      timer = null
    }

    if (rightTiming != null) {
      clearInterval(rightTiming)
      rightTiming = null
    }
  },
}
</script>

<style scoped lang="scss">
.container {
    display: flex;
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;

  .case-box,
  .alert-box,
  .crowd-box {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    // background: $bg-color;

    .case-box,
    .alert-box,
    .crowd-box {
        position: relative;
        margin: 8px;
        flex: 1;
    background-image: url(/img/box/box-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    // .title::after {
    //     content: '';
    //     position: absolute;
    //     top: 13px;
    //     left: 6px;
    //     width: 10px;
    //     height: 10px;
    //     border-radius: 50%;
    //     background: #43bafe;
    //     box-shadow: 0px 0px 8px 2px #43bafe;
    //     margin-left: 8px;
    // }

    :deep(.el-main) {
      padding: 0;
    }

    .box {
      display: flex;
      position: absolute;
      flex-direction: column;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 18px 0 18px;
      position: relative;

      font-size: 16px;
      font-weight: bold;
      font-style: oblique;
      letter-spacing: 2px;
      color: #fff;
      // background-image: linear-gradient(to right, #2e4aba, #010d3e);

      .title-tab {
        color: #99cccc;

        span {
          cursor: pointer;
        }

        span.choosed {
          color: #fff;
        }
      }

      .timer {
        width: 250px;
      }

      .regionTotal {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        margin-left: 50%;
        letter-spacing: 1px;
      }
    }

    .sub-title {
      display: flex;
      justify-content: space-between;
      height: 36px;
    }

    .sub-tab {
      padding: 10px;
      display: flex;
      color: #99cccc;

      .tab {
        display: flex;
        flex-direction: column;
        // background: $bg-color;
        justify-content: center;
        margin: 0 10px;
        flex: 1;
        background: $sub-tab-bg-color;
        border-radius: 8px;
        cursor: pointer;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &>div {
          height: 22px;
          line-height: 22px;
          white-space: nowrap;
        }
      }
    }

        // .title::after {
        //     content: '';
        //     position: absolute;
        //     top: 13px;
        //     left: 6px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     background: #43bafe;
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     margin-left: 8px;
        // }
    .echarts-box {
      padding: 12px;
      flex: 1;
      // height: 100%;
      // width: 100%;
    }

        :deep(.el-main) {
            padding: 0;
    .table-box {
      padding: 0 12px;
      flex: 1;

      .pointList {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin-top: -10px;

        .point {
          width: 12px;
          height: 12px;
          border-radius: 50px;
          background-color: #006699;
          cursor: pointer;
        }
      }

      :deep(.el-table) {
        .cell {
          // white-space: pre-line;
          white-space: pre-wrap;
          height: 100% !important;
          line-height: 3.2 !important;
        }

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }
        .el-table__body-wrapper {
          height: 100% !important;
          overflow: hidden;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
          .el-table__body {
            width: 100% !important;
            height: 100% !important;

            padding: 0 18px 0 18px;
            position: relative;
            tbody {
              width: 100% !important;
              height: 100% !important;

            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99cccc;

                span {
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .timer {
                width: 250px;
            }

            .regionTotal {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                margin-left: 50%;
                letter-spacing: 1px;
            }
        }

        .sub-title {
            display: flex;
            justify-content: space-between;
            height: 36px;
        }

        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;

            .tab {
                display: flex;
                justify-content: center;
                margin: 0 10px;
              td {
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
              }
            }
          }
        }

        .echarts-box {
            padding: 12px;
            flex: 1;
            // height: 100%;
            // width: 100%;
        }

        .table-box {
            padding: 0 12px;
            flex: 1;

            .pointList {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-top: -10px;

                .point {
                    width: 12px;
                    height: 12px;
                    border-radius: 50px;
                    background-color: #006699;
                    cursor: pointer;
                }
            }

            :deep(.el-table) {
                .cell {
                    // white-space: pre-line;
                    white-space: pre-wrap;
                    height: 100% !important;
                    line-height: 3.2 !important;
                }

                .el-table__body-wrapper {
                    height: 100% !important;
                    overflow: hidden;

                    .el-table__body {
                        width: 100% !important;
                        height: 100% !important;

                        tbody {
                            width: 100% !important;
                            height: 100% !important;

                            td {
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }

        .duty-information-box {
            height: 100%;

            &>div:first-child {
                background: $table-body-tr-n-color;
            }

            &>div:last-child {
                background: $table-body-tr-2n-color;
            }

            &>div {
                display: flex;
                height: 50%;

                &>div {
                    display: flex;
                    align-items: center;
                }

                &>div:first-child {
                    width: 28%;
                    justify-content: center;
                }

                &>div:last-child {
                    width: 72%;
                    text-align: left;
                }
            }

            .no-zb-data {
                width: 100%;
                height: 100%;
                background: transparent !important;
                align-items: center;
                display: flex;
                justify-content: center;
            }
        }

        #peopleList {
            height: 100%;
        }
      }
    }

    .alert-box {
        margin-top: 0;
        margin-bottom: 0;
    .duty-information-box {
      height: 100%;

        .title {
            height: 54px;
            line-height: 54px;
      &>div:first-child {
        background: $table-body-tr-n-color;
      }

      &>div:last-child {
        background: $table-body-tr-2n-color;
      }

      &>div {
        display: flex;
        height: 50%;

        &>div {
          display: flex;
          align-items: center;
        }

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        &>div:first-child {
          width: 28%;
          justify-content: center;
        }

        :deep(.el-table__header-wrapper) {
            height: 40px;
        &>div:last-child {
          width: 72%;
          text-align: left;
        }
    }
      }

    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
      .no-zb-data {
        width: 100%;
        height: 100%;
        z-index: 1;
        background: transparent !important;
        align-items: center;
        display: flex;
        justify-content: center;
      }
    }

    #peopleList {
      height: 100%;
    }
  }

  .alert-box {
    margin-top: 0;
    margin-bottom: 0;

    .title {
      height: 54px;
      line-height: 54px;
    }

    .echarts-box {
      overflow-x: hidden;
      overflow-y: auto;
    }

    :deep(.el-table__header-wrapper) {
      height: 40px;
    }
  }

  .border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}
</style>

 src/views/home/index.vue

Diff too large